脚手架Vue-CLI2初体验——项目初始化/文件夹结构解读

安装Vue-CLI

1. 全局安装（cli3)

npm install -g @vue/cli

2. 为使用cli2，需拉取cli2的模板

npm install -g @vue/cli-init

这样cli2即可使用vue init命令

3. 创建项目

• cli2项目
  vue init webpack projectName
• cli3项目
  vue create projectName

3.1. 创建项目时的各种选项

• Project name 项目名
• Project description 描述
• Author 作者（默认值读取本地gitconfig）
• Vue-build（选择vue的构建版本）
  • runtime+compiler 运行时+编译器（完整版）
  • runtime-only 仅运行时
• vue-router 路由
• ESLint
• unit test 单元测试
• e2e test 端到端测试
• npm or yarn

生成的项目文件夹-解读

• build： webpack相关配置文件
• config：webpack相关配置文件（一些变量等的定义，build中用到）
• node_modules：当前项目依赖的npm包
• src：源码
• static：静态资源（这里的东西会原封不动的被复制到dist中）（src中的文件会根据url-loader等的配置选择base64转码或复制）
• 其他文件
  • .babellrc —— ES代码相关转化配置（babel的配置）

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            // 市场占有率大于1%的浏览器，最后两个版本，ie8以上
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        //js阶段，2以上
        "stage-2"
      ],
      "plugins": ["transform-vue-jsx", "transform-runtime"]
    }
    

  • .editorconfig —— 项目文本相关配置(对代码进行统一，缩进风格，换行，编码等)

      root = true  //必须有
      [*]
      charset = utf-8 //编码
      indent_style = space //缩进风格
      indent_size = 2  //缩进大小
      end_of_line = lf  //换行符
      insert_final_newline = true //在文件最后加空行
      trim_trailing_whitespace = true //删除无效空格
    
    

  • .eslintignore —— 代码检测忽略的设置
  • .eslintrc.js —— eslint的配置
  • .gitignore —— git仓库忽略的文件夹配置
  • .postcssrc.js —— css转化相关配置
  • index.html —— 模板html文件
  • package.json —— node相关配置
  • package-lock.json —— 记录真实安装的各种包的版本（package.json中^,~设置的版本是不固定的）
  • README.md

4. package.json中的命令script设置

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

4.1. build指令：直接执行build/build.js文件

"build": "node build/build.js"

4.1.1. build.js文件

• rm：（remove）先清除之前的配置，之后再执行webpack配置等
• webpack(webpackConfig, fn); —— 使用webpack.prod.conf

//...
const webpackConfig = require('./webpack.prod.conf')
//...
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    //...
  })
})

4.1.2. webpack.prod.conf.js文件

const webpackConfig = merge(baseWebpackConfig, {
  //....

4.2. dev指令:

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

• --inline
• --progress 显示进度
• --config build/webpack.dev.conf.js" 指定配置文件

4.2.1. webpack.dev.conf.js文件

有关于devServer（本地服务器）的设置等

//..
const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
   //...
   devServer:{
     //...
   }
 }
});