vue项目构建
项目配置与创建
首先，在确定好使用的框架和组件库后，先要大致了解它们，做到文档基本熟悉。本次开发使用到的有： vue ， vuex ， axios ， elementUI 。
然后可以按官方指引，使用 vue-cli 搭建 vue 的项目，在项目里按照上面的文档尝试修改，加深理解：
# 安装依赖库，建议指定 vue 和 element 版本，避免版本升级带来意料之外的 bug$ npm install [email protected] [email protected] vuex axios#全局安装脚手架$ npm install -g vue-cli# 创建一个基于 webpack 模板的新项目my-project$ vue init webpack my-project# 进入项目目录$ cd my-project# 安装依赖$ npm install# 运行项目$ npm run dev使用编辑器打开项目结构如下图:
项目目录简单介绍:
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 测试文件夹，测试都写在这里 |
| .babelrc文件 | 编译参数，vue开发需要babel编译 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
1.package.json
{ "name": "demo",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Luke.deng",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e"
},
"dependencies": {
"vue": "^2.1.0"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.25.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.17.2",
"json-loader": "^0.5.4",
"chromedriver": "^2.21.2",
"cross-spawn": "^4.0.2",
"nightwatch": "^0.9.8",
"selenium-server": "2.53.1",
"semver": "^5.3.0",
"opn": "^4.0.2",
"ora": "^0.3.0",
"shelljs": "^0.7.4",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：
dependencies：项目发布时的依赖
devDependencies：项目开发时的依赖
scripts：编译项目的一些命令
2. .babelrc文件
.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。
{ "presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}3.index.html
主页我们可以像平时普通的html文件一样引入文件和书写基本信息，添加meta标签等。
<!DOCTYPE html><html> <head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>华企商学院</title>
</head>
<body>
<div id="app"></div>
</body>
</html>4.main.js
这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。
/*引入Vue框架*/import Vue from 'vue'
/*引入资源请求插件*/import VueResource from 'vue-resource'
/*重置样式*/import "assets/css/base.css"
/*基本JS*/import "assets/js/common.js"
/*引入路由设置*/import "./routers.js"
/*使用VueResource插件*/Vue.use(VueResource)5.App.vue
这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。
<template> <div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template><script>import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}</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>总结说明
在webpack的配置文件里，设置了main.js是入口文件，我们的项目默认访问index.html，这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了，也就是把组件挂载到了index页面，然后我们只需要去建设其他组件就好了，在App组件中我们也可以引入，注册，应用其他组件.