1、需要先安装nodejs 和vue-cli

这里使用的vue-cli是4.3.1

vue -V
@vue/cli 4.3.1

2、使用vue-cli创建一个工程

在命令行中输入初始化项目的命令，做了一些选择:

vue create my_project

babel是一般都需要的，eslint(语法检查和样式检查)还是有用的

选择default babel + eslint

然后就是一顿的install，ok了之后

进入目录之后，跑下面的命令，再访问http://localhost:8080/

cd my_project
npm run serve

如果想自己手动选择一些配置项，就选择"Manually select features":

Vue CLI v4.3.1
? Please pick a preset:
  default (babel, eslint)
> Manually select features

选择了这些

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

后面的这样选择的
css预处理器——选择的是dart-sass
lint——用的Prettier，选择的是在保存的时候就lint，早点发现问题好一点
Babel, ESLint的配置文件——选择的是各自有各自的配置文件，不用都放到package.json里面

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
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

然后就是一顿安装。。。。。。，命令行下面执行，访问https://localhost:20000/

 cd my_project
 npm run serve

3、vue工程文件的基本说明

生成的目录情况

public: html模板index.html还有favicon.ico
src: 是源代码目录
    assets——静态资源比如字体，图片等，
    components——全局公用组件，
    router——路由，
    store——全局 store管理，
    views——所有页面，
    main.js—— 入口文件加载组件初始化等，
    app.vue——入口页面，
node_modules: 那些需要的package，
.browserslistrc:一个单独的文件，指定了目的目标浏览器的范围
.eslintrc.js:eslint 配置项
babel.config.js:babel的配置文件
package.json:这个项目模块的描述文件

4、配置文件的修改和增加

4.1、增加环境的配置文件

一般分为dev、int、production环境，各个环境有各自的一些环境变量之类的，

各个环境的配置文件

下面这个是.env.dev的，不同环境的api或者env名字不一样

ENV = 'dev'
VUE_APP_BASE_API = '/devapi'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
port = 6000

在代码里面就可以这样使用判断当前是什么环境

if (process.env.NODE_ENV !== 'dev') {
  window.console.log =function(){};
}

4.2 修改package.json

增加dev名，还有各个环境的build命令，现在跑dev环境的命令就是npm run dev了

  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build:prod": "vue-cli-service build --mode production",
    "build:int": "vue-cli-service build --mode int",
    "build:dev": "vue-cli-service build --mode dev",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },