使用vue-cli4创建vue项目

使用vue-cli4创建vue项目

使用以下命令安装vue-cli4

npm install -g @vue/cli

还可以用这个命令来检查其版本是否正确

vue --version

创建vue项目

vue create your-app-name

然后会询问你需要安装哪些预置插件(preset)

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)  #键盘上下键切换，回车选择
> default (babel, eslint) #默认安装babel和eslint
  Manually select features  #自己手动选择

想尽快看到结果的同学可以选择default默认模式（然后跳到最后一步看），下面继续说明手动选择的流程：

Vue CLI v4.3.1
? 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)
>(*) Babel  #一般用来兼容浏览器
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router  #路由需要用
 (*) Vuex    #状态管理需要用
 (*) CSS Pre-processors   #CSS预处理器，挺有用，可选
 (*) Linter / Formatter   #代码检查器，可选
 ( ) Unit Testing   #单元测试，可选
 ( ) E2E Testing

选择完要安装的插件后，还需要进行一系列的设置

Vue CLI v4.3.1
? Please pick a preset: 
Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
#这个不用管，自动跳过的

? Use history mode for router? (Requires proper server setup for index fallback in production) 
No #选择no，暂时不使用history模式

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
Sass/SCSS (with node-sass)  #选择css预处理器类型，按自己喜好

? Pick a linter / formatter config: 
Basic  #选择第一个：ESLint with error prevention only

? Pick additional lint features: 
Lint on save  #选这个即可

? Where do you prefer placing config for Babel, ESLint, etc.? 
In dedicated config files  #问你如何放置Babel, ESLint等插件的配置文件，我们这里选放置在独立的配置文件中。

? Save this as a preset for future projects? (y/N) 
y #填y，即yes，将以上选择过的内容保存为一个preset，以后创建新的vue项目时可以直接选择这个preset作为设置，免去重新选择。

#此后按回车即可开始创建

创建完毕后，可依次使用以下命令进行启动服务

cd your-app-name
npm run serve

在浏览器中打开http://localhost:8080，即可打开项目

此文是本期专栏的其中一篇文章，想看到更多文章，请移步专栏主页~多谢关注（https://blog.csdn.net/u010516997/category_9997868.html）