[TOC]
vue项目搭建
1. 安装vue-cli脚手架
$ npm install -g vue-cli
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.3
added 6 packages from 2 contributors, removed 18 packages and updated 43 packages in 14.47s
~ vue -V
2.9.3
注意：此文档使用的vue-cli版本是2.9.3.
2. vue init webpack:通过webpack来创建一个项目
如果已经创建目录了，可以在这个目录中构建一个项目：
vue init webpack .
// 注意上面的点不能忽略，表示直接在当前目录构建项目。
? Generate project in current directory? (Y/n) 是否在当前目录生成 回车就好
downloading template
? Project name (vue-init) 项目名称 默认回车就好
? Project description (A Vue.js project) 项目描述 默认回车就好
? Author (user <user@outlook.com>) 作者 默认回车就好
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates
(or any Vue-specific HTML) are ONLY allowed in .vue files
- render functions are required elsewhere
这个是要问使用哪一个版本的vue： 运行时 + 编译 ， 仅运行时
键盘上下键选择， 我们选择第一个：开发时用，选好后 回车
? Install vue-router? (Y/n) 是否安装 vue路由 回车安装
? Use ESLint to lint your code? (Y/n) 是否使用ESLint来检查代码语法 n
❯ Standard (https://github.com/standard/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
? Set up unit tests (Y/n) 设置单元测试？ n
? Setup e2e tests with Nightwatch? (Y/n) 设置端到端测试？ n
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
❯ Yes, use NPM
Yes, use Yarn
No, I will handle that myself
项目创建完成后，我们是否应该为你运行`npm install`？
vue-cli · Generated "vue-init".
# Installing project dependencies ...
# ========================
也可以使用该命令从一个新目录中构建：
~ vue init webpack my-project
? Project name my-project
? Project description A Vue.js project
? Author user <user@outlook.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) no
vue-cli · Generated "my-project".
// Project initialization finished!
// ========================
To get started:
cd my-project
npm install (or if using yarn: yarn)
npm run lint -- --fix (or for yarn: yarn run lint --fix)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
3. 打开项目安装依赖运行
使用vue-cli创建好一个项目后打开项目，运行npm install安装依赖包，依赖包装好后即可启动项目：
npm install // 安装依赖包
npm start // 启动服务
4. 设置支持scss、less
4.1 安装less、scss依赖
~ npm install less less-loader --save-dev // 安装 less依赖
+ less@3.0.4
+ less-loader@4.1.0
added 39 packages from 67 contributors in 21.585s
// 安装sass的依赖包, sass-loader依赖于node-sass
~ npm install sass-loader node-sass --save-dev
+ sass-loader@7.0.1
+ node-sass@4.9.0
added 85 packages from 88 contributors in 52.185s
4.2 在webpack配置文件中配置
如果是通过vue-cli来构建的项目，那么vue-cli已经帮我们配置好了，只不过没有安装依赖包。
在webpack.dev.conf.js中，我们可以看到下面的代码：
// 2018-05-22
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
即webpack.dev.conf.js在合并了webpack.base.conf.js的基础上又添加了dev环境下的module。
在build文件夹下有一个utils.js文件，这个文件提供了一些通用的方法，供webpack.dev.conf.js和webpack.prod.conf.js使用。 其中styleLoaders方法如下：
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
通过这个方法可以对大多数css预处理进行了配置，具体配置在cssLoaders方法中。
4.3 scss、less在文件用使用
在app.vue文件中的用法
<template>
<div id="app"> <p>nihao <span>123</span></p> </div>
</template>
<script>
// 也可以在这里引入外部文件
import './assets/less/abc.less';
import './assets/scss/abc.scss';
</script>
<!-- less -->
<style lang="less" scoped>
#app {
p {
color: red; font-size: 20px;
&:hover {color: blue;} span { color: green; }
}
}
</style>
<!-- scss用法 -->
<style lang="scss" scoped>
</style>
需要注意一下几点：
- 已经在webpack中配置了，所以这里不需要引入任何less文件。
- 在style中声明lang="less"。 注意： scoped的作用仅仅是限定css的作用域，防止变量污染。
- 这样就可以根据less的语法使用了。
注意，加了scoped后生成的样式的文件：
<p data-v-7ba5bd90="">nihao <span data-v-7ba5bd90="">123</span></p>
<!-- 如果没加scoped 则没有data-v-7ba5bd90 --->
vue项目的目录结构
.
├── build/ # Webpack 配置目录
├── dist/ # build 生成的生产环境下的项目
├── src/ # 源码目录（开发都在这里进行）
│ ├── assets/ # 放置需要经由 Webpack 处理的静态文件
│ ├── components/ # 组件
│ ├── filters/ # 过滤器
│ ├── mixins/
│ ├── routes/ # 路由
│ ├── services/ # 服务（统一管理 XHR 请求）
│ ├── utils/ # 工具类
│ ├── views/ # 路由页面组件
│ ├── app.js # 启动文件
│ ├── index.html # 静态基页
├── static/ # 放置无需经由 Webpack 处理的静态文件
├── .babelrc # Babel 转码配置
├── .eslintignore # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）需被 Git 忽略的文件（夹）
├── package.json # （这个就不用多解释了吧）
上述目录结构中，需要注意的是 src/components/ 与 src/views/ 的区别
src/components/
- 主要是全局性的，或通用性很强的组件，具备良好的封装性
- 一般不会涉及到具体的业务逻辑
src/views/
- 主要是业务性的页面组件，基本不具备通用性
- 基本与路由一一对应（例如
/src/views/auth/login.vue对应着路由/auth/login） - 各功能模块（如
msg/）内部可分离出通用部分（如_components/、_mixins/）
若多个功能模块通用的，则建议移到全局，即
src/components/、src/mixins/等
├── README.md 项目介绍
├── package.json npm包配置文件
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build.js 生产环境构建脚本
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ └── prod.env.js 生产环境变量
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── assets 资源目录
│ │ ├── js 自己编写的js文件目录
│ │ └── scss 自己编写的scss文件目录
│ ├── components 公共组件目录
│ │ ├── base 基础功能组件目录
│ │ └── business 业务功能组件目录
│ ├── filters 自定义过滤器目录
│ ├── router 前端路由目录
│ │ └── index.js
│ └── views 页面目录
│ └── home-page 视图组件目录
│ ├── HomePage.vue 视图组件
│ ├── HomePageHeader.vue 从属视图组件
│ └── dash-board 子视图组件目录
│ ├── DashBoard.vue 子视图组件
│ └── DashBoardHeader.vue 子从属视图组件
└── static 纯静态资源，不会被wabpack构建
├── css 第三方css文件目录
├── images 所有图片目录
└── js 第三方js文件目录