vue-cli
vue-cli是用运行nodejs运行的配合 webpack-cli 和各种 webpack-cli插件 配合完成的，带有npm插件下载，sass编译，less编译，label编译，热加载热更新技术，文件打包功能，请求代理等等功能
正式开始
第一步安装nodeJS和npm，这个查看nodejs笔记的《安装nodejs》
vue-cli分为2.x和3.x【脚手架的版本跟vue没关系，vue目前还是2.x】
这里只讲3.x的，后面会补2.x
Vue-cli3.x
## 全局脚手架
npm install -g @vue/cli
## 查看版本
vue --version
## 新建项目
vue create 【name】
babel要，router要，vuex要，其他不需要，也可以都不要，后面自己再安装也行
安装完毕后
如果文件夹里没有node_modules这个子文件夹，这个是放需要的插件的，这是需要执行
npm install
从npm仓库去下载插件，下载目录是按文件夹里的package.json文件下载的，这个文件非常的重要，打开文件可以看到(2.0和3.0都一样)
- scripts是脚本的意思，也就是执行命令，启动服务，打包文件就是用这个脚本的命令
- dependencies是正式环境的依赖，会被最后打包的插件集合
- devDependencies是开发依赖，打包用不到，但是开发过程需要的插件集合
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": { ... }
npm的安装插件，卸载插件，更新插件的命令需要可以百度，nodeJs笔记里也有
然后就可以开始开发了，推荐的开发工具是webStrom，可以去工具看看
然后引入整个项目后先研究下目录
上面的目录是我们正常开发都需要的文件，除了plugins是我自己添加的外，应该都没有vue.config.js这个文件，这个文件是必备文件，但是脚手架没有自带需要自己配置，百度有大把配置
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
/** 区分打包环境与开发环境
* process.env.NODE_ENV==='production' (打包环境)
* process.env.NODE_ENV==='development' (开发环境)
*/
// 基本路径
// vue2.0的本地配置和打包配置是分开的，3.0是合并的，所以要加上三元判断
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/dist',
// 输出文件目录
outputDir: 'dist',
assetsDir: '',
lintOnSave: true,
runtimeCompiler: true, //关键点在这
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: config => {
// config.resolve.alias
// .set('@', resolve('src'))
// .set('@style', resolve('src/assets/style'))
// .set('@img', resolve('src/assets/img'))
// .set('@components', resolve('src/components'))
},
configureWebpack: () => {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 4000, // 打开项目的端口号
https: false,
hotOnly: false,
proxy: {
// 接口代理配置
},
before: app => {}
}
}
// 如果想修改打包文件夹名字，修改两处地方
// publicPath: process.env.NODE_ENV === 'development' ? '/' : '/xx',
// outputDir: 'xx',
然后把项目起起来，在目录的cmd里按照package.json里的script里的打开服务器，如果不知道怎么启动，可以打开项目里的readme.md这个文件，里面有这么一句Compiles and hot-reloads for development，意思是热加载启动开发环境，复制下面的命令，应该是这句，通过当前文件夹的cmd窗口输入
npm run serve
启动完毕后回车，等一会之后应该有提示网页地址
打开后页面长这样就是开启成功了
vue-cli跟直接引入vue-script代码的写法区别在哪
- vue-cli的代码是写在一个个的vue后缀文件里的，通过
webpack去编译的 - vue-cli引入插件就不是用script，用的是ES6模块化或者NodeJS的require写法
- vue-cli的
v-bind绑定文件路径失效
// 可以
<img src="../../assets/logo.png"/>
// 不行
<img :src="url"/>
data {
url: '../../assets/logo.png'
}
// 得改成这样
<img :src="url"/>
import url from '../../assets/logo.png'
data {
url,
}
vue-cli的作用是什么
如果说脚手架能实现的功能我用html+srcipt插件也能一样实现，我为什么要用vue-cli
- 脚手架让文件摆放更加规范，从上面的文件夹解读就可以看出来，规范能让维护简单很多
- 通过webpack打包的代码安全性更好，文件经过压缩也更小
- 脚手架还方便调试，因为他自带了代码映射，错误提示，以及热加载热更新
- 脚手架使用路由
router更方便，什么是路由查看下一篇笔记
