使用vue脚手架vue-cli

Vue脚手架指的是vue-cli。 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

安装

1. 安装Node.js (它会自带npm)

# 官网下载安装
http://nodejs.cn/download/
# 完成后 检测
npm -v
#
# 安装cnpm 淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 检测
cnpm -v

2. 安装webpack

npm install --global webpack
# 检测
webpack -v
# 如果你使用 webpack 4+ 版本，你还需要安装 CLI
npm install --global webpack-cli

3. 安装vue-cli3

# 官方文档：https://cli.vuejs.org/zh/guide/installation.html
npm install -g @vue/cli
#
# 检测
vue-cli -v
# 或
vue/cli -V

开发

创建项目

使用可视化界面创建项目

//这个运行很慢 不推荐经常用
//运行vue ui 打开图形化界面创建和管理项目
vue ui

使用命令创建项目

//使用命令创建项目
vue create demo1_cmd_vue

//完成后进入
cd demo1_cmd_vue
npm run serve

创建时自定义的几个选项说明

1. babel 见下面
2. TypeScript  
3. Progressive Web App (PWA) Support  支持渐进式网页应用程序
4. Router 路由管理器
5. Vuex 状态管理模式（构建一个中大型单页应用时）
6. CSS Pre-processors css预处理
7. Linter / Formatter 代码风格、格式校验
8. Unit Testing 单元测试
9. E2E Testing E2E（End To End）即端对端测试

// 更多创建时解读参考： https://blog.csdn.net/m0_37285193/article/details/82703022

创建完成后 目录解读

demo1_ui
  ├── node_modules				# npm 加载的项目依赖模块
  ├── public					#任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们
  ├── ├── favicon.ico			#
  ├── └── index.html			#项目的入口文件，webpack打包的js,css也会自动注入到该页面中, 见在webpack配置
  ├── src						#开发目录，基本上要做的事情都在这个目录里
  ├── ├── assets				#放置一些图片，如logo等
  ├── ├── components			#公共组件目录，可以不用
  ├── ├── router				#前端路由
  ├── ├── store                 #应用级数据（state）
  ├── ├── views                 #页面目录
  ├── ├── App.vue			    #项目入口文件,也可以直接将组件写这里,而不使用 components 目录
  ├── └── main.js			    #项目的核心文件
  ├── .gitignore				#
  ├── babel.config.js			#见解读
  ├── package.json				#见解读
  ├── package-lock.json         #见解读
  └── README.md                 #
 

# vue-cli3 对webpack进行了处理，它不会把配置文件暴露出来，
# 你可以通过 vue inspect > output.js 将配置信息输出到一个文件进行查看，
# 但要修改其中配置需要在vue.config.js中修改覆盖默认设置
# 官网解读： https://cli.vuejs.org/zh/guide/webpack.html#修改插件选项

babel.config.js

vue Babel
1. Babel 可以通过 babel.config.js 进行配置。
2. Babel 是一个 JavaScript 编译器；
3. Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
4. Babel的作用：
　　①、语法转换
　　②、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
　　③、源码转换 (codemods)

//官方文档： https://cli.vuejs.org/zh/config/#babel
//资料： https://www.cnblogs.com/21-forever/p/11128435.html

package.json解释

{
  "name": "demo1_ui",
  "version": "0.1.0",			//项目版本
  //"author": "Deq", 			//项目作者
  "private": true,				//是否为私有. 如果设置为true,npm拒绝发布这个包;
  "scripts": {							//npm命令
    "serve": "vue-cli-service serve",	//运行npm run serve 相当于运行vue-cli-service serve
    "build": "vue-cli-service build",	//同上
    "lint": "vue-cli-service lint"		//同上
  },
  //dependencies对象 指定了 [项目依赖] 的包名(插件)和其版本范围的映射。版本范围是个 有一个或多个 空白分隔描述符 的字符串
  //dependencies字段还可以用tarball或者git URL
  //请不要将测试或过渡性的依赖放到dependencies中，请参考下面的devDependencies。
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  //devDependencies对象 指定了 [运行依赖] 的包名(插件) 注意根上面 项目依赖的 区分
  //这些项将会在根目录下执行npm link或npm install时被安装，并且可以像其他npm配置参数一样被管理。可以参考npm-config获得更多信息
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",	//这是官方eslint，用于统一代码风格的工具，写的不符合规范就给报错，建议，在自己有把握的熟练项目里练习它比较好
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "engines": {				// 引擎相关的内容
    "node": ">= 4.0.0",		//要求node版本要大于指定版本, 否则不给你运行~
    "npm": ">= 3.0.0"		//要求npm版本大于指定版本
  },
  "browserslist": [		// 配置浏览器的信息查询范围，这些信息将给Autoprefixer babel-env-preset eslint-plugin-compat这些组件来使用 https://www.npmjs.com/package/browserslist
    "> 1%",				//
    "last 2 versions"	//每种浏览器的最近的两个版本
	//"not ie <= 8"		//IE8及以下版本不查询
  ]
}

package-lock.json

锁定安装时的包的版本号，并且需要上传到git时，以保证其他人在npm install时大家的依赖能保证一致。

运行

//运行
npm run serve

//具体见package.json文件

部署

1. 构建

//官方文档：https://cli.vuejs.org/zh/guide/build-targets.html

//构建
vue-cli-service build

//如果报错 ['vue-cli-service' 不是内部或外部命令...] 的解决方法
尝试使用 
npx vue-cli-service build
//(npx 是什么? 见下面)

完成后会产生dist文件夹 将dist文件部署到服务器即可

2. 将dist文件上传到服务器即可

npx 是什么

在 npm version >= 5.2.0 开始，自动安装了npx。 

npx是什么呢？ npx 会帮你执行依赖包里的二进制文件

有了 npx 之后

npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装