Vue-cli搭建项目

本文主要介绍如何使用vue官方脚手架vue-cli来搭建项目

1安装vue-cli并初始化项目

准备工具:nodejs

命令行执行如下代码

1
2
$ npm install vue-cli //安装vue-cli
$ vue init <template-name> <project-name> //初始化项目

template-name:模板名称,vue-cli官方为我们提供了5种模板:
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
一般用webpack模板就好了
project-name:项目名称

输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。
Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:作者,如果你有配置git的作者,他会读取。
Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

之后再命令行执行如下代码

1
2
3
$ cd <project-name> //进入项目根目录
$ npm install //安装项目依赖包
$ npm run dev //开发模式下运行项目

2vue-cli项目目录结构介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|-- build                            // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue-router路由配置文件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等(该文件夹下的文件不会被webpack处理)
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico // 项目favicon图标
|-- index.html // 入口页面
|-- package.json // 项目基本信息

由于vue项目目录结构文件较多,这里只做初级阶段的讲解:
package.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息(如项目名称、版本、描述、作者等)。

●script字段是用来指定npm相关命令的缩写
scripts字段代码如下:

1
2
3
4
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
},

scripts字段定义了你可以用npm运行的命令。在开发环境下,在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。npm run build是对项目进行打包,它会再项目根目录下商城一个dist文件夹,这个文件夹就是打包后生成的文件,也就是生产环境的项目
dist文件夹下目录包括:
index.html主页文件:因为是单页web应用,所以只有一个html。
static 静态资源文件夹:里边包括js、CSS和一些图片。
●dependencies字段是项目运行时所依赖的模块
●devDependencies字段是项目开发时所依赖的模块

3vue-cli项目文件模板介绍

main.js文件
main.js是整个项目的入口文件,在src文件夹下:

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'      
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false //生产环境提示,这里设置成了false
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

App.vue文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div id="app">
<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>

app.vue文件我们可以分成三部分解读,
template标签包裹的内容:这是模板的HTMLDom结构,router-view是路由视窗。
script标签包括的js内容,用来编写Vue的逻辑代码。
style标签包裹的css内容,scoped属性用来声明这些css样式块级作用域。

扫一扫,请老师喝水