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入门,不过正式环境和测试环境是不一样的,正式环境会分拆和压缩和转译等,做了相当多的操作来配合正式环境使用
<!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实例的写法
参考引用:
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。