Vue-Cli

生成项目

Vue-cli3以上的项目vue create myItem

Vue-cli2前的项目vue init webpack myItem

用哪种都是一样的

经常使用的包

sass

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm i -D sass-loader

element-ui：npm i element-ui -S

vue-router：npm install vue-router -S

axios：npm install axios -S

publicpath

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

Code

1	publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'

outputDir

当运行vue-cli-service build时生成的生产环境构建的文件目录

默认是:dist

assetsDir

放置生成的静态资源（JS，CSS，img，fonts）的目录

lintOnSave

Type: boolean|warning|default|error
Default: true

是否开启selint保存检测，有效值:true,false,error

设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。

loader

再vue-cli中创建的项目，想使用scss，直接把依赖给安装即可，不用配置

例如我想使用scss，我只需要安装node-sass sass-loader即可

注意node-sass直接安装会被墙，需要设置淘宝安装

报错

component报错

在注册组件的时候可能会报这个错误

Code

1
2
3

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

这时需要在vue.config.js中添加runtimeCompiler: true,重新启动即可