预装

install nodejs
install npm
install vue
install vue-cli
isntall webpack

以上所需要的工具须全部安装。

说明

本 demo 采用 vue 脚手架 vue-cli 初始化项目。

Begin

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
29
30
31
32
33
34
35
$ 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

根据末尾的提示安装依赖

1
2
3
4
5
6
$ cd test-dmeo
$ npm install // 这里将会花很长的时间

...

$ npm run dev // 会自动打开浏览器

至此,vuejs 项目可以正常打开。

那么还没完…

这仅仅是初始化架子,对于内部的某些配置还需要我们进行自定义初始化。

Follow

可能会在项目中安装 router、axios、sass-loader、style-loader、css-loader 等等所需要用到的工具。

每安装一个工具,在根目录中的 package.json 中就会添加相应的工具的名称及版本。

1
2
3
4
5
$ 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 替换为:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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 可以配置路径的别名

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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,这个工具建议都安装上,不管它是不是很烦人,但是规范代码还是有必要的。