Vue

Diy Vue脚手架 

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
全局安装webpack
npm i webpack@3.12.0 -g

配置支持css文件解析
cnpm i css-loader style-loader –save-dev

-S 配置项目依赖
cnpm i vue vue-router -S

webpack解析vue
cnpm i vue-loader@14.1.1 vue-template-compiler@2.5.17 -D

cnpm i extract-text-webpack-plugin -D

webpack-dev-server –inline –progress –config

“dev”: “webpack-dev-server –inline –progress –config ./webpack.dev.config.js”,
“dev”: “webpack –config ./webpack.dev.config.js”,

template: `
    <div>
        我是App组件，我的名字是{{name}}，年龄是{{age}}。
    </div>`
Diy Vue脚手架

全局安装webpack
npm i webpack@3.12.0 -g

新建目录diy-vue-cli
npm init –yes 默认生成一个package.json文件 （管理整个项目中的包）
{
“name”: “diy-vue-cli”,
“version”: “1.0.0”,
“description”: “”,
“main”: “src/main.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

接着新建index.html文件 !tab 补全代码
新建目录src 新建main.js

配置webpack
cnpm i webpack@3.12.0 -D

-S 配置项目依赖
cnpm i vue vue-router -S

配置webpack
新建目录build
新建文件webpack.dev.conf.js webpack.pro.conf.js 
const path = require(“path”)

module.exports = {
entry: “./src/main.js”,
output: {
path: path.resolve(“dist”),
filename: “./bundle.js”
},
//监听文件变化实时编译
watch: true,
//导入时若是这些后缀可以不写，自动解析
resolve: {
extensions: [“.js”, “.vue”, “.json”],
},
module: {
loaders: [
{
test: /.vue$/,
loader: “vue-loader”
},
{
test: /.css$/,
loader: “style-loader!css-loader”
}
]
}
};

webpack解析vue
cnpm i vue-loader vue-template-compiler -D
{
test: /.vue$/,
loader: “vue-loader”
}

webpack解析css
cnpm i css-loader style-loader -D
{
test: /.css$/,
loader: “style-loader!css-loader”
}

配置html文件分离
cnpm i html-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]

配置webpack-dev-server
cnpm i webpack-dev-server -D
webpack-dev-server –open –hot –inline –progress –config ./build/webpack.dev.conf.js

–open 自动打开浏览器
–hot
–inline 自动刷新
–progress 显示编译过程
–config 指定配置文件

新建App.vue

“dev”: “webpack-dev-server –open –hot –inline –progress –config ./webpack.dev.config.js”,

cnpm i element-ui -S