如何安装和vue-cli4.x

一、如果你已将安装了全局的vue-cli2.x
你需要以下操作
1、卸载vue-cli 2.x
npm uninstall vue-cli -g
2、检查时候已经卸载
vue -V 如果出现不是内部或外部命令证明卸载成功
3、安装（创建vue3.x项目）

	打开终端：
	1）安装webpack-cli   （因为vue是基于webpack的）
	npm install webpack-cli -g
	2）安装vue-cli4.x脚手架
	npm install @vue/cli -g
	3、检测vue是否安装成功在当前vue4文件夹中打开终端
	vue -V    出现@vue/cli 4.5.13  安装成功（版本可能稍有差异）
	4、基于vue-cli4.x项目 创建vue3.x项目
		1) vue create app_4
		2)选择配置项 有两个默认的 一个自定义的
		Vue CLI v4.5.13
	? Please pick a preset:
	> Default ([Vue 2] babel, eslint)   默认选中 ：
	  Default (Vue 3) ([Vue 3] babel, eslint)
	  Manually select features
	                  1）选择创建的项目
                Vue CLI v4.5.13
                ? Please pick a preset:
                > Default ([Vue 2] babel, eslint)  (vue2.x项目)
                Default (Vue 3) ([Vue 3] babel, eslint) (vue3.x的项目)
                Manually select features （自定义配置项）  选择这一项

                2）选择vue的配置项   (这里只选择了Babel)
                >(*) Choose Vue version
               必选 (*) Babel （必选 可以将ES6代码转为ES5代码，从而在现有环境执行）
                ( ) TypeScript  // Ts是一个js（后缀.js）的超集（后缀.ts）包含并扩展了 Js 的语法，需要被编译输出为js在浏览器运行
                ( ) Progressive Web App (PWA) Support // 渐进式Web应用程序  (接口缓存，优化项目)
                ( ) Router // 路由
                ( ) Vuex  // 状态管理（全局变量管理）
                ( ) CSS Pre-processors  // css预处理器 ：sass 和 less 使用较多
                (*) Linter / Formatter // 代码风格检查和格式化 ： ESLint + Prettier 使用较多，严格模式
                ( ) Unit Testing // 单元测试
                ( ) E2E Testing // e2e（end to end） 测试 

                根据你选的配置进行Y/N选择 或者 空格选择 i是反选  a是全选
                3）格式配置（这里选择了 不严谨模式）
                ? Choose a version of Vue.js that you want to start the project with 3.x
                ? Pick a linter / formatter config: // 选择语法检测规范
                > ESLint with error prevention only // 只进行报错提醒 
                ESLint + Airbnb config // 不严谨模式
                ESLint + Standard config // 正常模式
                ESLint + Prettier // 严格模式 使用较多

                4）在进行配置（这里选择了 保存即检测）
                > to invert selection)
                >(*) Lint on save  // 保存即检测
                ( ) Lint and fix on commit // 提交才检测，此时可能问题已多，事倍功半 
                5）在进行配置 （这里选择了 统一配置）
                > In dedicated config files // 独立文件放置，项目会有单独的几件文件
                In package.json // 统一放置文件

                6）在进行配置（这里选择了不保存n）
                Save this as a preset for future projects? (y/N) y // 是否保存此配置，方便在以后创建项目中选择使用以上配置

                7）启动
                npm run serve

创建vue2.x项目
1、vue create app_two 创建app_two项目
2、cd app_two 进入app_two项目文件夹
3、npm run serve 启动项目

项目目录解读

在这里插入代码片├─public    外部静态资源目录
│      favicon.ico  icon图
│      index.html   默认组件显示容器
│      
├─src  源代码
│  │  
│  ├─assets  内部引用的静态资源
│  │      logo.png  图片
│  │      
│  ├─components  全局公用组件
│  │       HelloWorld.vue
│  │  App.vue  入口页面
│  │  main.js  入口 加载组件 初始化等
│
│  .browserslistrc  指定了项目的目标浏览器的范围，这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
│  .eslintrc.js  代码风格检测配置文件
│  .gitignore  git提交的忽略文件配置
│  babel.config.js  babel配置文件
│  package.json 项目的模块的描述文件
│  README.md
│   

package.json文件内容解析

{
  "name": "app_two", //项目名称
  "version": "0.1.0", //项目版本号
  "private": true,//防止意外发布私有存储库，如果你不准备写一个npm的公共依赖包，而是一个自己的项目的话，必须加上这个配置
  "scripts": {//项目的一些运行启动命令以 npm run开头,例如 npm run serve
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": { // 生产环境依赖包列表，具体为包以及相应包的版本，每次修改后要使用npm install重新引入包依赖，如果变动太大需要将目录node_modules删除再使用命令引入依赖
    //依赖包 npm install <package_name> --save
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {//开发环境依赖包列表 在build 时。不会被打包
    // npm install <package_name> --save-dev表示将这个包名及对应的版本添加到package.json的devDependencies 
    //  这里写的依赖用于开发环境，不发布到生成环境（会被打包）
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": { //eslint配置 eslint工具是为了保证代码的一致性和避免一些语法错误
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {} //eslint检查的规则
  },
  //用以兼容各种浏览器
  "browserslist": [//在不同的前端工具之间共享目标浏览器的库，确定哪些支持哪些版本的浏览器
    "> 1%",//全球有超过1%的人使用的浏览器
    "last 2 versions",//根据CanIUse.com追踪的最后两个版本的所有浏览器
    "not dead" //排除不用的浏览器
  ]
}

main.js解析

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false 阻止启动生产消息

new Vue({
    //h是vuejs中的一个函数 返回一个虚拟DOM节点 render得到这个节点之后，
    // 返回给mount函数，渲染真是的DOM节点，并挂载到真是节点上
  render: h => h(App),
}).$mount('#app')