vue-cli@4 入门（一）

因为最近要做一个管理后台，这里做一下记录。从入门到项目上手。适合初学

安装 vue-cli@4

1、首先卸载旧版本（如果事先安装了 vue-cli 1.x 或者 vue-cli 2.x，要先卸载掉）

npm uninstall vue-cli -g

2、安装Vue-cli

npm install -g @vue/cli

3、查看版本

$ vue --version
#显示差不多如下
@vue/cli 4.4.4

项目初始

1、创建项目

#创建一个项目， projectName 项目名
$ vue create projectName

然后会提示

- ? Please pick a preset:

◯ myproject (这个是我自己的模板，后面会提到如何生成模板）
◯ default
◉ Manually select features

选择 Manually select features 回车

然后会有提示，空格选择选项。回车确定，选项按照我标记的选择就可以了

? Check the features needed for your project: (Press \ to select, \ to toggle all, \ to invert selection)
❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing
--- 回车后，提示如下，输入 Y 回车这里选择 n 的话，url会有#
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

选择 css，我这里选择的是 less。看个人吧 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus

这里默认回车

❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier

Lint on save

这里是保存模板。保存就可以了。随便选择一个。保存之后，下次创建项目的时候，就可以使用这个模板了

后面就等待项目加载了。可能有点儿慢。如果项目使用 git，在.gitignore中添加一行，取消依赖的加载。

node_modules/

运行项目
加载完成，终端会提示下面的命令

$ cd projectName $ npm run serve

npm run serve就是以后项目运行的时候，运行的命令了