1.安装@vue/cli
1.安装nodejs（https://nodejs.org/en/）
验证 node -v(version) 使用npm
2.安装vue-cli npm install -g @vue/cli
验证 vue -V 使用vue
2.项目创建
https://segmentfault.com/a/1190000014627083?utm_source=index-hottest
1.vue create 项目名称(不能含有大写字母);
2.就是问你要不要用淘宝镜像，国内的开发者输入y
3.系统将提示您选择一个预设。您可以选择Babel + ESLint基本设置随附的默认
预设，也可以选择“手动选择功能”以选择所需的功能。
可能需要的更默认设置非常适合快速制作新项目的原型，而手动设置提供了更多面向生产的项多选项j建议如图选择)
选择的时候一定要点空格键
4.选完之后要再次进行确认选择
node-sass是自动编译实时的，dart-sass需要保存后才会生效
5. 选择vue版本,目前选择vue 2.x=
6.选择哪个配置文件来配置babel等
In dedicated config files:在专用配置文件中In package.json:在package中
7.是否保存你的自定义选项，以便下次创建时直接使用
8.等待创建就完成了
3.启动项目
开发环境启动项目 npm run serve
生产环境启动项目 npm run build
如何关闭命令提示符（关闭之后，项目就会停止）
千万不要直接关闭 命令提示符
- 先要终止命令 ctrl+c
- y/n终止
- 项目就会停止
- 最后关闭 命令提示符
又要重新打开项目
磁盘操作
切换磁盘D:
打开文件夹(vueff)cd vueff
返回上级目录cd ..
1.第一步准确的找到你的项目的路径（可选）
回车
2.第二步运行你的项目（必须）
或 npm run serve (启动项目）
3.第三部 开启（必须）
项目创建失败怎么办?
1.控制面板---》程序（卸载）-----》nodejs（右键单击，卸载）
2. 重新安装 node（具体看网址）Node.js安装及环境配置之Windows篇 - 刘奇云 - 博客园
3. 重启电脑
4. 执行命令（具体看图片）
- 1. node -v
- 2.npm cache clean --force
- 3. npm install
- 4. npm install -g @vue/cli
- 5.vue --version
项目目录:
node_modules 存储各种模块
package.json 记录了项目需要的依赖(开发&生产)、部分webpack配置项、可执行脚本...
- 不仅可以编译 es6语法，也可以编译vue语法
babel.config.js webpack打包的时候，会读取这里的配置项，然后基于babel-loader把ES6代码编译为ES5
src 所有需要webpack编译的内容都要放在这个目录下
|- main.js 程序入口(webpack打包入口)
|- App.vue 页面入口
|- api 所有接口请求管理&axios的二次配置
|- assets 项目需要的静态资源文件
|- lib (部分公司)存放抽离的JS方法
|- store 存放vuex的管理
|- router 存放路由的管理
|- component 存放公有的组件
|- pages(views) 存放页面组件
public 存放页面模板的
|- index.html
|- favicon.ico
vue.config.js 在项目根目录中，基于这个文件编写一些配置，目的是修改默认的webpack配置项
特殊：
一般来讲，public/index.html 页面模板中不会编写啥内容，最后都是基于webpack把各组件(或各页面)的内容合并编译后，插入到index.html的#app的容器中！！
但是部分需求还需要在这个页面模板中写一写的：
- + 我们后期可以基于vue3的传送门技术，把组件中的部分内容插入到页面除#app外的其它容器中，此时我们需要在页面中写一些其它容器!!
- + 我们也可以把一些纯静态的内容，而且是不想基于vue的模板编译的，写死在页面模板中！{这样做的很少，因为即使写在vue组件中，我们也可以基于v-pre指令让其跳过编译}
- + webpack最后会把项目中的CSS(或JS)合并压缩打包为一个文件「我们后期也可以做分割打包，例如：路由懒加载」；这样在页面渲染的时候，加载CSS或JS就会慢，如果我们想在没有加载完这些文件之前，先呈现给用户Loading(或骨架屏)效果，来减少白屏等待时间，那么我们就在页面模板中，单独写一写骨架屏的实现，这些代码是不能和主要内容打包在一起的！！
- + webpack打包，是按照ES6Module(或CommonJS)模块规范，分析出模块间的依赖，然后按照依赖打包在一起，所以需要我们的模块支持ES6Module(或CommonJS)规范；如果某个模块不支持这些规范：
+ 手动改为支持的 module.exports=xxx
+ 在页面模板中基于 <script src=""> 导入，后期基于window.xxx使用
手动修改脚手架的配置
@vue/cli 为了美化项目，把写好的webpack配置项都放在 node_modules中了
想要修改其配置项，就需要自己创建 vue.config.js 文件，在文件中修改它的一些配置【vue脚手架设置好的规则】
1. publicPath：执行打包后，导入文件资源的起始路径；默认“/”，从项目根目录下找，这样我们必须保证打包后的文件部署到服务的根目录下，否则会出现找不到资源；我们可以给其修改为“./”，这样不论部署到哪个目录下，都是从当前目录开始查找！！
2. pages：配置多页面「不同的页面分别指定：入口、出口、依赖的模块...
3. lintOnSave：设置ESLint语法检测的规则
默认值'default'：开发和生产环境都需要检测，而且只有一个不符合语法规范，则编译失败
true：有语法规范问题，只是警告，但是编译是让其成功的
false：取消ESList词法规范检测
真实项目中，我们可以 开发环境中设置为true、生产环境下设置为false(加快打包速度)
4. transpileDependencies:[] 默认情况下，所有在node_modules中的模块都不会基于babel-loader进行编译(也就是不会把这里的ES6转换为ES5)，所以为了考虑浏览器兼容，我们需要把node_modules中基于ES6代码写的模块，也进行编译！！(只不过我们使用的模块，一般都是已经编译成为ES5代码的了！！)
5. productionSourceMap:true 在生产环境打包的时候，是否生成资源文件对应的map文件「作用：方便在线调试」；真实开发的时候，我们设置为false，以此让打包速度更快；
高级----------------------------------------------------------------------------------------
configureWebpack:脚手架中没有设置的，我们基于configureWebpack加入进去
chainWebpack:脚手架设置好的我们自己去修改「链式写法修改」
/* 修改脚手架默认设置好的webpack配置项 */
const ENV = process.env.NODE_ENV;
module.exports = {
// 打包后，在index.html导入的资源，前面是 “./”「默认是 “/”」
// 例如： <script src="js/chunk-vendors.ffeebf7c.js"></script>
// 好处：后期在服务器端进行部署的时候，不论部署到根目录还是其它目录，都可以正常访问资源
publicPath: './',
// ESLint词法检测 true/warning & false & default/error
// 下面写法：成产环境下不开启词法检测，开发环境下开启
lintOnSave: ENV !== 'production',
// 生产环境中，不编译SourceMap文件，提高打包编译的速速「SourceMap是有助于压缩后的文件调试」
productionSourceMap: false,
// configureWebpack:发现默认的webpack配置项不够实现我们的需求，需要自己再次新增一些配置规则
configureWebpack: {
plugins: []
},
// chainWebpack:发现默认的webpack配置项的规则需要修改
chainWebpack: config => {
// config:默认设置好的配置项
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
return options;
});
},
}devServer:-----------------------------------------------
修改webpack-dev-server的配置项
devServer.proxy:实现proxy跨域代理
proxy: {
'/jianshu': {
//代理到真实服务器
target: 'https://www.jianshu.com',
//把发送请求时候的 orgin改为代理服务器源
changeOrigin: true,
ws: true,
//把地址中的"//jianshu"替换成''
//请求地址：'/api/user/list'
//代理服务器地址：'http://127.0.0.1:9999/api/user/list'
//真实请求服务器：'http://127.0.0.1:9999/user/list'
pathRewrite: {
'^/jianshu': ''
},
//让所有的请求都代理到这个服务器，向这个服务器发请求
'': {
target: 'http://www.jianshu.com',
changeOrigin: true
}
},
}
vue 项目兼容
vue的核心是基于Object.defineProerty 实现数据劫持的，所以及不论怎么处理，IE8及一下都不兼容
webpck配置项中默认已经：
+ 基于postcss-loader给CSS设置前缀了
+ 基于babel-loader把ES6转换为ES5了
如果想兼容更多的浏览器
- 调整 package.json 中的 browserslist 配置项中
- +css3的样式会基于这个列表自动设置不同的前缀
- +es6等代码也会基于这个列表，自己进行语法编译
问题：某些ES6内置类，是babel-loader无法编译处理兼容的，例如:Promise...，所以我们需要导入 @babel/polyfill「这个模块中把ES6很多常见的内置类，基于ES5的语法重写了」
脚手架默认安装的模块：
+ vue
+ vue-template-compiler
+ ESLint及Babel相关的
但是配置项中已经把less/sass的编译处理写了，我们想用哪一个，直接安装对应的模块和加载器即可
$ npm i less@3 less-loader@7 --save-dev
注意安装低版本，不要安装最新版本
1570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
