Vue3.0脚手架基本使用详细教程（基于node.js，构建项目（两种方式）、预设）

vue2.x和3.x的差异

1. 去除了static、config、build
2. 新增了public
3. 自动依赖node modules
4. 默认配置webpack，通过veu.config.js修改
5. vue.inspect 可查看webpack默认配置
6. 内置了vue-cli-service serve服务
7. 浏览器打开图形界面，vue.ui查看
8. vue3.0对vue的主要3个特点：响应式、模板、对象式的组件生命方式。进行了全面的更改，底层的实现和上层的api都有了明显的变化，基于Proxy重新实现了响应式，基于treeshaking内置了很多功能，提供了类式的组件声明方式。

node.js

• node.js下载链接
• 查看版本号：node-v，npm-v 出现版本号即安装成功（如未出现重启电脑重试）
• node8.9或以上版本

vue-cli(两种方法可选：npm，cnpm)

方法1：npm

• 卸载：如果已经安装了旧版本的vue-cli(1x或2x)，须先卸载：

   npm uninstall vue-cli -g
  

• 全局安装：

  npm install -g @vue/cli
  

• 查看版本号：（注意：-V大写）
  出现版本号即安装成功

   vue -V
  

• vue-cli3.0对2.0版本的桥接：

   npm install -g @vue/cli-init
  

方法2：cnpm(淘宝镜像，网络慢的情况建议使用用）

• 全局安装cnpm

   npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• 卸载：如果已经安装了旧版本的vue-cli(1x或2x)，须先卸载：

   cnpm uninstall vue-cli -g
  

• 全局安装：

  cnpm install -g @vue/cli
  

• 查看版本号：（注意：-V大写）
  出现版本号即安装成功

   vue -V
  

• vue-cli3.0对2.0版本的桥接：

   cnpm install -g @vue/cli-init
  

构建项目

• 创建项目

   vue create vue-admin
  

• 配置信息
  本地存在相同目录时：
  Overwrite：重写（删除目录，重新创建目录）
  Merge：合并
  Cancel：取消
  
  配置方式：（预设）
  Defult：默认配置
  Manually select features：自定义配置
  
  路由模式有两种：hash、history
  hash：即地址栏中#符号；如：http：//www.abc.com/#/hello
  history:利用了HTML5 History Interface 中新增的pushState{} 和 replaceState{} 方法。（这个方法就是面试中常问的，怎么去除URL中的“#”，就是需要后端Apache 或 Nginx 进行简单的路由配置，否则报404）
  注意：这两个配置就是解决URL有没有“#”的问题，如果不在意“#”，就用hash，在意就用history

  选择ESLint的代码规范：
  ESLint官网：https://eslint.bootcss.com/
  ESLint with error prevention only：只配置使用 ESLint 官网的推荐规则
  ESLint + Airbnb config：使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
  ESLint + Standard config：使用 ESLint 官网推荐的规则 + Standard 第三方的配置
  ESLint + Prettier：使用 ESLint 官网推荐的规则 + Prettier 第三方的配置（Prettier 主要是做风格统一。代码格式化工具）
  
  选择何时进行代码检测：
  Lint on save ：保存时进行检测
  Lint and fix on commit：提交的时候进行检测
  
  选择Babel、PostCss，ESLint ，etc.等配置文件的存储位置
  In dedicated config files：单独的保存在各自的文件中
  In package.json：保存在package.json文件中
  
  是否保存默认选项：
  y：保存 ==> save preset as：输入保存的名字即可
  n：不保存
  
  

还有一种创建项目的方式：

• 在终端中输入：

  	vue ui
  

  然后会自动打开浏览器，出现创建demo的网页，选择你的路径，进行创建项目。
  按照上面的配置方式进行创建vue3.0的demo（个人比较喜欢使用这种方式）