一. 使用 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
注意:按空格是选择勾还是不勾,按回车是代表确认文章来源地址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模板网!