目录
vue脚手架3.X+
桥接工具安装
安装vue-cli 3.x+
创建项目
运行创建项目命令后弹出来的：
这里我选择手动配置（Manually select features）
选择你需要的配置项
项目启动
vue-cli3与2版本区别
目录结构：
自定义配置文件
有的同学可能记不住这么多步骤，可以先收藏，收藏等于学会，以后用到了省的百度了，哈哈！
文末跟博主交流哦，感谢支持！
vue脚手架3.X+
桥接工具安装
#使用npm安装桥接工具
npm install -g @vue/cli-init
#使用淘宝镜像安装桥接工具
cnpm install -g @vue/cli-init
桥接工具安装
#使用npm安装桥接工具
npm install -g @vue/cli-init
#使用淘宝镜像安装桥接工具
cnpm install -g @vue/cli-init
安装vue-cli 3.x+
#使用npm安装
npm install -g @vue/cli
#使用cnpm安装
npm install -g @vue/cli
创建项目
#vue create 项目名
vue create vue-cli3
运行创建项目命令后弹出来的：
这里我选择手动配置（Manually select features）
通过键盘上的 ↓ 方向键选中Manually select features并敲回车，会显示如下配置项
通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选
选择你需要的配置项
这是我的配置项：
每个配置项的解释：
选好配置项之后 按回车键
配置选中选了choose Vue version，会问你用哪个版本的脚手架，这里我选择的是2.x
的
选择 css 预处理器
这里我选择的是 Sass/Scss(with dart-sass)
选择如何存放位置
这里我选的是放在package.json里
是否保存当前配置
这里我选择的是N不保存，如果键入Y需要输入保存名字。如果保存的话下一次就不需要一步一步
地从头开始配置。
静待Vue安装这些项目环境
项目启动
1. cd 项目名进入到工程目录
2. npm run serve 启动项目
3. 打开浏览器输入网址项目
功启动
vue-cli3与2版本区别
vue-cli3基于webpack4打造，vue-cli2是基于webpack3
vue-cli3的设计原则是"0配置"，移除了配置文件，build和confifig等
vue-cli3提供 vue ui 的命令，提供了可视化配置
移除了static文件夹，新增了public文件夹，并将index.html移入了public文件夹
创建项目的命令 vue create 项目名
目录结构：
public 类似 static文件夹，里面的资源会原封不动的打包
src源码文件夹
src 下的 main.js
需要注意的是： 该方法是直接挂载到入口文件 index.html 的 id=app 的 dom 元素上的
import Vue from 'vue' //导入构造函数 import App from './App.vue'//导入根组件App.vue //构建信息是否显示 Vue.config.productionTip = false new Vue({ //这里的render: h=> h(App)是es6的写法, render: h => h(App)可理解为是渲染App组件 render: h => h(App), // render: h => h(App) 转换过来就是： // render:(function(h){ // return h(App); // }); }).$mount('#app')
自定义配置文件
在项目根目录下新建一个 vue.config.js 配置文件，必须为 vue.config.js ，vue-cli3会自动扫
描此文件，在此文件中修改配置文件。
//在module.exports中修改配置 module.exports = { devServer: { open: true, // 启动服务后是否打开浏览器 } }
当然你也可以配置端口号，打包的目录等等
官方配置文档： https://cli.vuejs.org/zh/confifig/
博主公_号：前端老实人，期待各位小伙伴加入我们一起学习的队伍哦❤
