---
title: Vuejs项目初始化
date: 2017-07-17 10:55:46
tags: ['vue', 'teaching']
---
# 预装
> install [nodejs](https://nodejs.org/en/)
install npm
install vue
install vue-cli
isntall webpack
以上所需要的工具须全部安装。
# 说明
本 demo 采用 vue 脚手架 vue-cli 初始化项目。
# Begin
```shell
$ vue init webpack test-demo
// 这里应注意：webpack可以替换为github某仓库，不是非得为webpack
// test-demo为所创建的文件夹名称， 后面可以重新指定项目名称
// 若需要使用Vue1.x，则使用vue init wbpack#1.0 test-demo
// 具体配置如下（完全可以按照自己的意愿进行配置，可直接回车）：
? Project name (test-demo)
? Project name test-demo
? Project description (A Vue.js project) Just a test demo.
? Project description Just a test demo.
? Author (johnniang <1340692778@qq.com>)
? Author johnniang <1340692778@qq.com>
? Vue build standalone
? Install vue-router? (Y/n) Y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? (Y/n) n
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "test-demo".
To get started:
cd test-demo
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
```
# Next
根据末尾的提示安装依赖
```shell
$ cd test-dmeo
$ npm install // 这里将会花很长的时间
...
$ npm run dev // 会自动打开浏览器
```
至此，vuejs 项目可以正常打开。
那么还没完...
这仅仅是初始化架子，对于内部的某些配置还需要我们进行自定义初始化。
# Follow
可能会在项目中安装 router、axios、sass-loader、style-loader、css-loader 等等所需要用到的工具。
每安装一个工具，在根目录中的 package.json 中就会添加相应的工具的名称及版本。
```shell
$ npm i axios -S // 由于只是本项目中使用，所以使用-S来安装需要的工具，若仅仅是开发中使用的工具，则使用-D。
$ npm i vue-router -S
$ npm i node-sass -D
$ npm i sass-loader style-loader css-loader -D
```
到这里并没有完，还需要在 webpack 中配置相应的规则，否则 webpack 是无法解析 scss 语法以及 css 样式的。
# Config Webpack
打开 build/webpack.base.config.js，然后将 module 替换为：
```json
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}, {
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
],
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
```
# 有关路径问题：
在 resolve 节点中的 alias 可以配置路径的别名
如：
```json
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'page': path.resolve(__dirname, '../src/page'),
'api': path.resolve(__dirname, '../src/api'),
'utils': path.resolve(__dirname, '../src/utils'),
'store': path.resolve(__dirname, '../src/store'),
'router': path.resolve(__dirname, '../src/router'),
'styles': path.resolve(__dirname, '../src/styles'),
'static': path.resolve(__dirname, '../static')
}
}
```
# End
有关 Vuejs 项目的基本搭建基本到此结束，其余的配置还需要在项目开发中不断的修改或增添。
关于期间选择了 ESlint，这个工具建议都安装上，不管它是不是很烦人，但是规范代码还是有必要的。
Vuejs项目初始化
