首页 > 代码库 > Vue-cil 学习
Vue-cil 学习
Vue-cli是vue官方出品的快速构建单页应用的脚手架
使用npm来安装vue-cil,命令如下:
npm install vue-cli -g
-g:表示全局安装。(npm是随node.js安装包一起安装的,关于这一部分内容可以到:http://www.cnblogs.com/momei/p/7194089.html 进行了解)
安装完成后,可以使用 vue -V 来查看 vue-cil 版本,版本正确显示,则证明 vue-cil 已安装成功,可以开始接下来的学习了。
初始化项目
vue init命令初始化项目:
vue init template-name project-name
template-name:表示模板名称,vue-cil 官方提供了5种模板。
- webpack:一个全面的 webpack + vue - loader 的模板,功能包括热加载,linting,检测和css扩展。
- webpack-simple:一个简单的 webpack + vue - loader 模板,不包含其他功能,让你快速的搭建vue的开发环境。
- browserify:一个全面的Browserify + vueify 的模板,功能包括热加载,linting,单元检测。
- browserify-simple:一个简单的Browerify+vueify的模板,不包括其他功能,让你快速的搭建vue的开发环境。
- simple:一个最简单的单页应用模板。
project-name:表示项目名称,根据自己的项目名称来填写。
在实际开发中,一般使用webpack模板,安装命令如下:
vue init webpack vueObject
回车后,会询问几个选项,根据自己的需要进行填写。
Project name:项目名称,如果不需要更改直接回车。这里填写的项目名称一律使用小写。
Project description:项目描述,默认为A Vue.js project直接回车。
Author:作者,如果有配置git作者,它会自动读取。
Install vue-router:是否安装vue的路由插件,一般都需要安装,选择Y。
Use ESLint to lint your code:是否有ESLint来限制你的代码错误和风格。一般在大型团队需要。
steup unit tests with Karnma + Mocha:是否需要安装单元测试工具 karma + Mocha。一般在大型团队需要。
Setup e2e test with Nightwatch:是否安装e2e来进行用户行为模拟测试。一般在大型团队需要。
以上信息完成后,vue-cil 出现命令提示:
- cd vueobject :进入vue项目。
- npm install:安装项目依赖包package.js。
- npm run dev 运行程序。
完成以上操作,会打开一个网页显示vue的图标及其文字信息。
vue-cil 项目结构
package.json:项目根目录下的文件,定义项目开发所需要的模块以及一些配置信息。
packsge.json里的script字段:定义了可以用npm运行的命令
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" },
dependencies 字段和 devDependencied 字段:
- depandencies 字段指项目运行时所以来的模块;
- devDependencies 字段指定了项目开发所依赖的模块
在命令行中运行npm install命令,会自动安装dependencies和devDempendencies字段中的模块。
webpack配置相关内容:
运行npm run dev 就相当于执行了node build/dev-server.js。重点阅读此文件夹。
.babelrc :存放在根目录下,babelrc是一个转码器,将ES6代码转化为ES5。
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }
.editorconfig:定义项目的规范编码。
root = true [*] // 对所有文件应用下面的规则 charset = utf-8 // 编码规则用utf-8 indent_style = space // 缩进用空格 indent_size = 2 // 缩进数量为2个空格 end_of_line = lf // 换行符格式 insert_final_newline = true // 是否在文件的最后插入一个空行 trim_trailing_whitespace = true // 是否删除行尾的空格
vue-cil 模板
家下来了解vue-cil的模板操作,包括增加模板和修改模板。
npm run build 命令:执行该命令vue-cil会自动进行项目打包,打包完成后在项目的根目录下生成dist文件。
dist 文件包含:
- index.html 主页文件,因为开发是单页web应用,所以一般只有一个html文件。
- static 静态资源文件:css、图片、js。
src文件下的 main.js:是整个项目的入口文件。
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, template: ‘<App/>‘, components: { App } })
这里引入了App组件和</App>模板,是通过import App from ‘./App‘ 代码引入
App.vue:
<template> <div id="app"> <img src="http://www.mamicode.com/assets/logo.png"> <router-view></router-view> </div> </template> <script> export default { name: ‘app‘ } </script> <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>
router/index.js 路由文件:
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Hello from ‘@/components/Hello‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/‘, name: ‘Hello‘, component: Hello } ] })
我们可以看到 import Hello from ‘@/components/Hello’这句话, 文件引入了/components/Hello.vue文件。这个文件里就配置了一个路由,就是当我们访问网站时给我们显示Hello.vue的内容。
Hello.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 () { 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>
以上便是 vur-cil 的一些基本知识,更深入的了解需要项目的磨练,愿每个实践者都有所得,也有更多的机会去运用。
Vue-cil 学习