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

时间 2019-11-06

标签 vue cli webpack 一些项目文件介绍繁體版

原文原文链接

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

检查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 入门html

babelrc

这是babel的配置文件vue

主要功能:node

编译es6转义为es5webpack
通常用2个插件es2015,stage-2,transfer-runtimegit

参考连接:babel6 入门es6

eslintrc.js

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

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

'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的,须要本身添加,添加的部分都是一些经常使用的移动端使用的vue-router
项目使用了reset.css来保持浏览器css属性的纯洁,科普信息(里面介绍了normalize和reset):来，让咱们谈一谈 Normalize.css
index.html自己并无什么特别的东西,只有一个id为app的div,webpack会帮咱们将其余东西打包并插入到这个文件里面去,id为app的div是为了vue的一个父组件定位,也能够不写在里面
webpack打包的时候会生成一个app.js,里面包含了全部须要的css,图片,js,参考:webpack2入门,不过正式环境和测试环境是不同的,正式环境会分拆和压缩和转译等,作了至关多的操做来配合正式环境使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sell</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="static/css/reset.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

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: '<App/>', // 主组件的模板
  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

<!--html模板,template语法-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--自定义组件hello-->
    <hello></hello> 
  </div>
</template>
<!-- js语法-->
<script>
import Hello from './components/Hello' // 导入Hello组件

export default { // 导出默认输出一个对象
  name: 'app', // 导出后的name属性
  components: { // 导出子组件Hello到当前页面使用
    Hello
  }
}
</script>
<!--css语法-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

主要步骤:

导入Hello组件,而后调用
使用vue的components语法注册组件Hello,而后导出,这样当前页面就可以使用这个组件
上面这些内容会所有经过vue-loader解析,而后转化为vue可以使用的对象供vue使用
这样跟前面的main.js一块儿理解,main.js的components 可以使用APP就是由于这个缘由,父组件APP里面包含了子组件Hello

引用参考:

Hello.vue

这个vue文件跟以前的App.vue实际上是同样的套路了

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello', // 子组件的名字
  data () { // vue传入组件的data必须是函数
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

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