【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 EEXISTnpm ERR! path D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.jsnpm ERR! dest D:\Devlop\nodejs\node_global\vue.cmdnpm 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.cmdnpm ERR! Remove the existing file and try again, or run npmnpm 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\-04-13T02_13_31_038Z-debug.log

npm i -g @vue/cli 安装报错解决方案

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

D:\study_html\vueApp>vue -V2.9.6

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

npm install -g @vue/cli --force

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

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

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

vue create 项目名称

vue create创建项目失败

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

D:\study_html\vueApp>vue create demoAppInvalid project name: "demoApp"Warning: name can no longer contain capital lettersD:\study_html\vueApp>vue create myAppInvalid 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 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，所以悬赏

注意：按空格是选择勾还是不勾，按回车是代表确认

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 with3.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)> LessStylus

⑦ 选择代码格式校验使用哪种校验规范，选择第三种，回车

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 onlyESLint + Airbnb config> ESLint + Standard configESLint + 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> toproceed)>(*) 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 filesIn 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.327s152 packages are looking for fundingrun `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 serveINFO Starting development server...DONE Compiled successfully in 5229ms上午11:00:41App 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.