【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目

这篇具有很好参考价值的文章主要介绍了【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. 使用 vue-cli 搭建项目

1.安装vue/cli ,执行下面的命令安装或是升级

npm i -g @vue/cli
npm i -g @vue/cli 安装报错

​ 如果安装报错如下

npm WARN rollback Rolling back node-notifier@10.0.1 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli'
npm ERR! code EEXIST
npm ERR! path D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js
npm ERR! dest D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! EEXIST: file already exists, cmd shim 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js' -> 'D:\Devlop\nodejs\node_global\vue.cmd'
npm ERR! File exists: D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Devlop\nodejs\node_cache\_logs\2023-04-13T02_13_31_038Z-debug.log
npm i -g @vue/cli 安装报错解决方案

​ 查看vue版本 vue -V ,主要原因是安装vue的版本过低。

D:\study_html\vueApp>vue -V
2.9.6

​ 输入以下命令 ,可以强制覆盖以前旧版本的vue-cli脚手架。

npm install -g @vue/cli --force  

​ 执行完,看到 + @vue/cli@5.0.8 安装成功。

+ @vue/cli@5.0.8
added 842 packages from 491 contributors in 84.507s

2.在命令行输入以下命令创建Vue项目

vue create 项目名称
vue create创建项目失败

当使用vue create 命令创建项目失败, 发现报错如下:

D:\study_html\vueApp>vue create demoApp
Invalid project name: "demoApp"
Warning: name can no longer contain capital letters

D:\study_html\vueApp>vue create myApp
Invalid project name: "myApp"
Warning: name can no longer contain capital letters

​ vue命令无法创建命名包含大写字母的项目。所以,在命令行创建vue项目时,要用小写英文字母来命名项目,也可以用 vue ui 可视化界面来创建项目。

①vue create 正确创建如下,输入 y
D:\study_html\vueApp>vue create demo-app
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes   
② 选择第二种,手动选择特性,支持更多自定义选项
  • Default 表示使用默认配置,默认勾选babel、eslint ,回车之后直接进入装包
  • Manually 自定义勾选特性配置,选择完毕后,才能进入装包
Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features
③ 自定义选择要安装的插件。( 按空格是选择勾还是不勾,按回车是代表确认。)

babel: 把ES6语法可以转换成ES5语法的插件

Router:vue-router,路由,因为项目要用到路由跳转所以勾上

Vuex:我们项目也会用,但是还没学,所以先不勾,学的时候再来下载

CSS Pre-processors: css的预处理,可以选择less和sass,因为我们这个项目样式用less,所以悬赏

注意:按空格是选择勾还是不勾,按回车是代表确认文章来源地址https://www.toymoban.com/news/detail-416341.html

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
④ 选择vue的版本 ,选择2.x项目
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x
⑤ 是否使用history模式的路由,不需要,输入n (我们之前用的路由都是hash模式)
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
⑥选择css预处理语言 ,勾选 Less
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Less
  Stylus
⑦ 选择代码格式校验使用哪种校验规范,选择第三种,回车
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier
⑧ 选择什么情况下触发代码校验,按空格表示勾选,全选然后回车
  • Lint on save 当修改报错文件时触发
  • Lint and fix on commit 当执行git committ提交时
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save  
 (*) Lint and fix on commit
⑨对应Babel, ESLint等配置文件是,这里选择独立的,勾选第一个
  • In dedicated config files 生成保存到独立的配置文件中
  • In package.json 把插件的配置信息和package.json文件写在一起
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

⑩选择 你要不要保存当前的设置,方便下一次快速使用。如果你要保存输入y,不需要保存输入n。这里我选择n.
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
①① 选择哪种方式安装依赖,我选择npm
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
  Use Yarn
> Use NPM
最后,安装成功后,提示
added 216 packages from 110 contributors in 27.327s

152 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project demo-app.
�  Get started with the following commands:

 $ cd demo-app
 $ npm run serve

3.启动项目 ,运行项目

npm run serve
① 进入所在项目路径
D:\study_html\vueApp>cd demo-app
② 执行命令,查看项目启动成功
D:\study_html\vueApp\demo-app> npm run serve

> demo-app@0.1.0 serve D:\study_html\vueApp\demo-app
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 5229ms                                                                      上午11:00:41


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.12.48.22:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

到了这里,关于【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-cli3的安装和项目创建

    一 vue-cli3的安装 (注意:vue-cli3在安装之前,需要先删除旧版本,即vue-cli2)   cnpm i -g @vue/cli vue-cli3的卸载:cnpm uninstall -g @vue/cli  然后用命令“vue -V”查看是否删除vue,如果没有删掉,就直接去文件夹里面删除vue文件夹即可 (二)vue-cli3项目创建 1,用dos命令的方式 vue cre

    2024年02月09日
    浏览(55)
  • Vue-cli搭建SPA项目

    Vue CLI(Vue Command Line Interface)是一个用于快速搭建基于Vue.js的前端项目的工具。它是Vue.js官方提供的一个脚手架工具,旨在简化Vue.js项目的开发过程。Vue CLI提供了一些强大的功能,帮助开发者轻松创建、开发和构建Vue.js应用程序 Vue CLI的主要特点和功能: 快速创建项目: V

    2024年02月07日
    浏览(56)
  • vue-cli3.0创建项目IE兼容处理

    一、白屏处理 IE白屏,基本是JS代码报错,包括app.js报错或者chunk包报错,需要分以下几个步骤解决: 1. 安装sockjs-client包,npm i sockjs-client -D。 2. 安装babel-polyfill包,npm i babel-polyfill -D,并在main.js中引入(在第一行代码引入),import \\\'babel-polyfill\\\'; 3. 在vue.config.js中增加配置:

    2024年02月07日
    浏览(52)
  • 关于基于vue-cli脚手架创建vue项目(图文版)

    目录 一.vue-cli脚手架·概述(来源于官方文档) 二.创建流程 2.1 首先安装node.js,如未安装请移步到:安装node.js 2.2 安装脚手架vue-cli 2.2.1 使用npm install -g @vue/cli命令  2.2.1 使用vue -V 查看版本并检验是否安装成功  2.3 安装vue项目 2.3.1 使用命令 vue create 项目名 ​编辑 2.3.2 这里

    2024年02月07日
    浏览(93)
  • 怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)

    1、安装node.js 1、首先需要安装node.js,推荐下载地址:Node.js 2、检查是否安装成功,使用打开黑窗口的快捷键window+R,输入cmd,在黑窗口输入node -v,如果输出版本号,就说明安装node环境成功, 2、vue-cli搭建Vue开发环境 Vue CLI:命令行界面,俗称脚手架,Vue CLI 是一个基于webpa

    2024年02月02日
    浏览(76)
  • vue-cli自定义创建项目-eslint依赖冲突解决方式

    创建项目步骤 概览: 在安装 npm安装时会报错 依赖冲突原因: @vue/eslint-config-standard@6.1.0 依赖于 eslint-plugin-vue 的 ^7.0.0 版本,但是项目中安装了更高版本的 eslint-plugin-vue 解决方式:降级eslint-plugin-vue到@vue/eslint-config-standard支持的版本 解决后: 再进行npm安装,就能成功

    2024年04月09日
    浏览(51)
  • vue-cli 脚手架创建uniapp项目(微信小程序)

    1、全局安装 vue-cli 脚手架(不建议用 5.0 版本,避免报错) 2、脚手架创建项目 3、选择 默认模板 即可 4、编译并启动项目  5、开发者工具,导入项目,注意路径 \\\"项目地址/dist/dev/mp-weixin\\\" 开发的规范 不能直接在开发者工具中修改代码,口诀:vscode做开发,开发者工具做调试

    2024年02月09日
    浏览(51)
  • vue-cli创建项目、vue项目目录结(运行vue项目)、ES6导入导出语法、vue项目编写规范

    1 vue-cli创建项目 1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建 2 vue项目目录结构 2.1 运行vue项目 2.2 vue项目的目录结构 3 es6导入导出语法 4 vue项目编写规范 4.1 修改项目 4.2 以后写vue项目,只需要在固定位置写固定代码即可 App.vue HomeView.vue AboutView.vue

    2024年02月07日
    浏览(77)
  • vue-cli5脚手架搭建项目过程详解 -vue组件单元测试

    单元测试是对软件中的最小可测试单元进行测试。(最小可测试单元是要有结果产出的。例如某个方法,单独的某个操作) 单元测试其实是伴随着敏捷开发,它是对更快开发的一种追求。早发现错误比晚发现错误会更好,保证自己的代码符合要求 一: 搭建基于 jest 的 vue 单元

    2023年04月14日
    浏览(94)
  • vue3自动引入插件unplugin-auto-import (vite搭建项目,vue-cli搭建项目两种方式)

    插件地址:https://github.com/antfu/unplugin-auto-import 如果安装了eslint,使用的ref、torefs等报错undefind如下图 需在2个地方vue.config.js ,.eslintrc.js文件做配置 代码:

    2024年02月13日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包