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
}