vue-cli2脚手架2项目配置说明

vue-cli脚手架初始化项目

vue init webpack 项目的名字
vue create 项目名称
脚手架目录:public + assets文件夹区别
node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
src：程序员源代码文件夹
-----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
-----components文件夹:一般放置非路由组件（或者项目共用的组件）
App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件（相当于翻译官：比如让ES6语法翻译成ES5语法）
package.json：看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件

其他项目配置

1.package.json

加上–open让项目运行起来的时候，让浏览器自动打开

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2.eslint校验功能关闭

在根目录下，创建一个vue.config.js
比如：声明变量但是没有使用，此时eslint校验工具会报错

module.exports = {
  // 关闭 eslint
  lintOnSave: false
}

有时候
vue启动（npm run dev）报错Errors: 1 http://eslint.org/docs/rules/no-multiple-empty-lines
解决方法，找到 config–>index.js文件里的useEslint：true 改为useEslint ：false

3.src文件夹简写方法，配置别名

jsconfig.json配置别名@提示，@代表的是src文件，这样以后文件越多，找的时候方便

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

css预处理器

npm安装less和less-loadernpm或者stylus和stylus-loader
vue-cli 构建的项目默认是不支持 less 的，需要自己添加。

首选，安装 less 和 less-loader ，在项目目录下运行如下命令

npm install less less-loader --save-dev
安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

最后，在代码中的 style 标签中 加上 lang=“less” 属性即可~

同理可以安装stylus