vue-cli和webpack和一些项目文件介绍

vue-cli是vue的脚手架,负责协助编写基础代码
官网地址

检查node并安装vue-cli

# 确保node版本在4以上
node -v          
v6.9.5

# 安装vue-cli,npm全局安装
npm install -g vue-cli

初始化vue项目

# 使用vue-cli初始化项目
vue init webpack sell(课程项目叫sell)

#--------------------------------------
This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack#1.0 sell

? Project name sell
? Project description A Vue.js project
? Author test
? Vue build standalone
? Install vue-router? No #为了后面的手动安装
? Use ESLint to lint your code? Yes #因为要用ESLint检查代码
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "sell".

   To get started:

     cd sell ## 这里已经提示了怎么安装相关模块和启动dev服务器了
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

安装需要用到的模块并启动dev服务器

cd sell
sudo npm install #根据package.json来安装需要的模块
npm run dev ##运行开发测试服务器,会自动打开浏览器,并且自动显示测试页面

参考链接:vue-cli 入门

babelrc

这是babel的配置文件

主要功能:

编译es6转义为es5
一般用2个插件es2015,stage-2,transfer-runtime

参考链接:babel6 入门

eslintrc.js

这是ESLint的配置文件,至于为什么用ESLint的话,就是为了自动检查代码,保持一致的代码风格,从而保证代码质量.

这里需要注意的是,在eslintrc.js文件里面:rules是自定义的检查规则,可以覆盖默认的检查规则,例如要加分号,函数要加空格,这个跟代码风格有关

 'rules': {
   // allow paren-less arrow functions
   'arrow-parens': 0,
   // allow async-await
   'generator-star-spacing': 0,
   // allow debugger during development
   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
   'space-before-function-paren': 0, //函数参数前面要加空格
   'space-before-blocks': 0, //函数块前面要加空格
   'semi': 0 //分号检查
 }

index.html

默认是没有meta的,需要自己添加,添加的部分都是一些常用的移动端使用的
项目使用了reset.css来保持浏览器css属性的纯洁,科普信息(里面介绍了normalize和reset):来，让我们谈一谈 Normalize.css
index.html本身并没有什么特别的东西,只有一个id为app的div,webpack会帮我们将其他东西打包并插入到这个文件里面去,id为app的div是为了vue的一个父组件定位,也可以不写在里面
webpack打包的时候会生成一个app.js,里面包含了所有需要的css,图片,js,参考:webpack2入门,不过正式环境和测试环境是不一样的,正式环境会分拆和压缩和转译等,做了相当多的操作来配合正式环境使用




  
  sell

main.js

这是vue-cli项目使用的一个主js文件,这是在webpack配置的时候定义的,是主js入口

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 导入内置的vue模块(npm的node_module里面)
import App from './App' // 导入当前目录的App文件为App

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //vue父实例的挂载点
  template: '', // 主组件的模板
  components: { App } // 使用导入的App,es6对象写法
})

App其实就是App.vue

主要的步骤:

导入模块或者导入文件之后,才能被使用,这种导入方式是es6的模块导入方式
vue初始化实例的方式,并且注册组件来使用

/* eslint-disable no-new */是elint的特殊规则的另外一种写法,这个意思是可以单独new而不用赋值,这是为了适应vue的初始化vue实例的写法

参考引用:

webpack2入门

App.vue

这是vue的特别的文件:

完整语法高亮
- 对于ide来说,在html插入其他形式代码会警告的,所以改成这样就没事了,而且webstorm2017已经支持vue了,更大程度的方便写代码
CommonJS 模块
- vue-cli 里使用了 vue-loader，vue-loader会将 *.vue 的文件转换成 CommonJS 模块
组件化的 CSS
- 既然能够单独一个文件,那么就相当于单独一个一个组件一个文件或者文件夹了

文件结构:

template
script
css

主要步骤:

导入Hello组件,然后调用
使用vue的components语法注册组件Hello,然后导出,这样当前页面就能够使用这个组件
上面这些内容会全部通过vue-loader解析,然后转化为vue能够使用的对象供vue使用
这样跟前面的main.js一起理解,main.js的components 能够使用APP就是因为这个原因,父组件APP里面包含了子组件Hello

引用参考:

vue单文件组件
vue-cli里面main.js为什么能够import .vue文件
Vue Component Spec
怎么把vue组件export default（{ }）中的代码写到另外的js文件中。

Hello.vue

这个vue文件跟之前的App.vue其实是一样的套路了

webpack

其他部分参考::webpack2入门

备注:

在vue-cli默认没有安装stylus插件的时候,需要先安装，
```
`sudo npm install stylus --save-dev`
```
vue-loader会利用postcss来自动补全浏览器的css差异,所以写一次css就可以支持其他浏览器差异
[Vue warn]: Do not use built-in or reserved HTML elements as component id: header 不能使用header作为组件名字,现在改成使用v-header