vue-cli3 初始化创建项目

VUE CLI 3

一、vue-cli3 与 vue-cli2的区别

vue cli3 是基于webpack4 打造的， vue-cli 2 还是 webpack3
vue-cli 3 的设计原则是0配置，移除的配置文件根目录下的 build 和config等目录
Vue-cli3 提供了vue ui 命令，可以提供可视化配置，更加人性化
移除了static文件夹，新增public文件夹，并且index.html 移动到了public中

二、初始化vue cli实例（创建项目）

脚手架2

vue init webpack

脚手架3

# 执行
vue create 项目名称
# 然后会生成下列一系列的配置信息
# 第一步
Vue CLI v3.2.1
┌───────────────────────────┐
│  Update available: 4.4.1  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)  # 选择配置
❯ default (babel, eslint)  # 默认配置
  Manually select features # 手动选择特性, 这里 我们选择手动的选择特性
# 选择 Manually select features 后选择配置
❯◉ Babel   # es6转es5
 ◯ TypeScript  # 
 ◯ Progressive Web App (PWA) Support  # 渐进式web app 支持
 ◯ Router  # 路由
 ◯ Vuex  # VueX是适用于在Vue项目开发时使用的状态管理工具
 ◯ CSS Pre-processors  # css预处理器
 ◉ Linter / Formatter  # 就是ESlint  对代码做一些检测的，规范性的检测
 ◯ Unit Testing  # 单元测试
 ◯ E2E Testing  # 端到端测试
 
 # 第二步
  Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)  # 你需要把你要配置的房放在哪里
❯ In dedicated config files  # 单独的配置文件
  In package.json  # 放在 package.json 中
  
  # 第三步
  Save this as a preset for future projects? (y/N)  # 是否需要将刚才的选择保存到 自定义的选择中 。这里可以报错

三、Vue-cli3 创建的项目的目录结构

vue_project
	-- node_modules  # 安装的库依赖
	-- public  # 相当于vue-cli2中的static，打包后原封不动的放在dist中
	-- src  # 源代码
	-- .browserslistrc  # 配置浏览器相关的东西
	-- .gitignore  # 配置git相关的东西，可以配置忽略一些文件
	-- .babel.config.js  # 配置 babel
	-- package.json
	-- package-lock.json  # 显示的真实的安装版本(package.json中可能有~或者 ^ 后面加版本号，因此可能会安装不同版本的依赖)
	-- readme.md  # markdown 文档

四、启动项目以及打包项目

# 启动项目
npm run serve
# 打包项目
npm run build

注：这些命令都是在 package.json 的 script 中配置的

{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 运行项目
    "serve": "vue-cli-service serve",
    # 打包项目
    "build": "vue-cli-service build"
  },
  # 运行依赖
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 开发依赖
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}