vue-cli 脚手架
- 参考网站：https://cli.vuejs.org/zh/guide/
- npm i @vue/cli -g 或者 yarn global add @vue/cli 下载vue脚手架(一般安装在全局)
- 安装成功后，全局环境下会生成一个 vue的可执行命令， vue --version查看版本号
- 脚手架：帮助我们把webpack等相关配置都处理好，我们只需要基于脚手架快速构建一个项目即可（项目中一定包含webpack的相关设置）
一、创建并配置脚手架以及其的使用
- 创建项目：vue create 文件夹名（项目名）
- 选择预调：
- 第一项为曾经的配置好的选项，保留下来的
- 第二项为默认设置，包含了babel和eslint;
- 第三项为手动选择，可以手动选择自己需要的插件（因为前两项点了确定就可以完成配置，所以下面只展示第三项手动选择）
- **选择插件配置： **
- 按上下箭头选择配置，空格键选中,选择完成后，回车键继续，会依次问询你所选插件的配置
- 选择vue-router是否使用历史路由
- 选择css预处理语言
- 选择代码风格和格式校验
- 选择代码校验方式
- 选择方式和第二步（选择预调）相同
- 设置在哪里保存插件的配置
- 第一个选择为创建一个独立文件
- 第二个为创建为package.json文件（配置文件，用npm install下载）
- 选择是否保存为一个将来可复用的preset
- 如果选择是，下来就得起一个名字
- 选择完毕开始安装插件
- 启动项目：cd + 第一步起的项目名（文件夹名）进入文件夹，然后输入npm run serve 或者 yarn serve 启动项目，会生成如图的地址
，将地址输入浏览器的地址栏即可
二、脚手架创建的文件夹
- **eslint **: 代码校验，校验代码的格式是否正确，规范，控制缩进
- gitignore : git忽略
- babel.config.js : 配置es6
- package.json : 项目配置文件
- **readme.md **: 对当前项目进行一个解释
- vue.config.js : 这个是该项目的配置文件；比如配置webpack，配置跨域都在这里配置
- **yarn.lock **: 和package.json有点类似
- eslintrc.js : eslint配置文件
- src : 资源文件，咱们代码都是写在这个里面的
- assets : 静态资源文件，一般放图片和一些css
- components : 组件，页面的一部分
- router : 配置的路由
- store : vuex仓库
- **views **: 页面级组件
- **App.vue **: 只有一个，所有的组件的入口文件
- main.js : 是webpack打包的入口文件（可以在main.js配置一些全局的组件，filter过滤器，或指令，全局的路由钩子函数）
- public : webpack打包之后最后要插入到这个HTML文件中
- node_moduless : 安装的依赖模块
- **dist **: 文件夹是在yarn build 产生的，是上线之前需要把当前整个项目进行打包之后的文件
<body>
<script>
// npm install @vue/cli
// vue create
// cd ../ mkdir aa
// git add . git commit git push
// npm install vuex --save
// vue create admin
// npm install nrm --save
// 切换源：nrm use taobao;
// npm install vue-cli -g; npm webpack init aaa;
// 自动化生成一个vue的项目 vue create 项目名 node webpack
// eslint ：代码校验，校验代码的格式是否正确;规范；控制锁缩进；
// gitignore : git忽略
// babel.config.js : 配置es6
// package.json : 项目配置文件
// readme.md :对当前项目进行一个解释
// vue.config.js : 这个是该项目的配置文件；比如配置webpack，配置跨域都在这里配置
// yarn.lock : 和package.json有点类似；
// eslintrc.js:eslint配置文件
// src : 资源文件，咱们代码都是写在这个里面的
// public : webpack打包之后最后要插入到这个HTML文件中
// node_modules : 安装的依赖模块
// dist : 文件夹是在yarn build 产生的，是上线之前需要把当前整个项目进行打包之后的文件；
let fn = () => {
}
let a = 100;
let c = 300;
// 生产环境和开发环境
</script>
</body>
- 开发模式下，我们基于这个命令启动一个本地服务，把基于 webpack 编译后的内容预览
$ npm run serve - 生产模式下，把写好的内容进行编译打包，最后部署到服务器上
$ npm run build
<title></title>
<!--
直接在这里引入的时候，我们导入的资源最好都设置为 <%= BASE_URL %> 这种方式，因为这样写的 webpack
会帮我们进行编译处理
-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>reset.min.css">
三、vue-cli的一点深入研究
$ vue inspect 查看当前项目默认的 webpack 配置信息
$ vue create
$ vue add [plugin] 在当前项目中安装插件
…
默认的配置项中已经把 less / sass 等规则写好了，如果我们的项目中需要使用 less，无需配置规则，只需要安装对应的模块和加载器即可
$ yarn add less less-loader -D
<script>
import './xxx/xxx.less';
</script>
<style lang='less'>
//...
</style>
1. 修改默认的webpack配置
需要在根目录中设置 vue.config.js
2. 实现组件之间信息通信的方式
- props 父->子
- emit 子<->父 拥有共同父亲的兄弟 隔代处理
- children|$refs)
- provide/inject 隔代处理
- attrs
3. vuex能处理任何情况下的组件信息通信
前提：SPA 单页面（实现的是同一个页面中，各组件的信息通信）
vuex:vue 中实现公共状态管理的插件
四、Vue.config
vue.config 配置预览
module.exports = {
// process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
publicPath: process.env.NODE_ENV === 'production' ? 'http://www.zhufengpeixun.cn/' : '/',
// outputDir
// 自定义目录名称，把生成的 JS / CSS / 图片等静态资源放置到这个目录中
assetsDir: 'assets',
// 关闭生产环境下的资源映射（生产环境下不在创建 xxx.js.map 文件）
productionSourceMap: false,
// 设置一些 webpack 配置项，用这些配置项和默认的配置项合并
configureWebpack: {
plugins: []
},
// 直接去修改内置的 webpack 配置项
chainWebpack: config => {
// config:原始配置信息对象
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 200 * 1024;
return options;
});
},
// 修改 webpack-dev-server 配置（尤其是跨域代理）
devServer: {
proxy: {
// 请求地址 /user/add
// 代理地址 http://api.zhufengpeixun.cn/user/add
"/": {
changeOrigin: true,
target: "http://api.zhufengpeixun.cn/"
}
}
},
// 多余1核 cpu 时：启动并行压缩
parallel: require('os').cpus().length > 1
}
