Vue-cli


Vue-CLI 项目搭建

1 单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html#ad

2 Vue-CLI 项目搭建

2.1 环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

- 安装node

官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/

- 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安装脚手架

cnpm install -g @vue/cli


- 清空缓存处理

npm cache clean --force

2.2 项目的创建

创建项目

1
2
3
4
5
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目,选取Router, Vuex插件
//标准eslint,自动修复(ESlint+Standard config--》lint on save+Lint and fix on commit)
vue ui 使用图形界面创建项目

启动/停止项目

1
2
npm run serve / ctrl+c
// 要提前进入项目根目录

打包项目

1
2
npm run build
// 要在项目根目录下进行打包操作

package.json中

1
2
3
4
5
"scripts": {
"serve": "vue-cli-service serve", # 运行项目
"build": "vue-cli-service build", # 编译项目成html,css,js
"lint": "vue-cli-service lint" # 代码格式化
},

2.3 认识项目

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉,不上传git,使用npm install重新安装)
public: 共用资源
--favicon.ico
--index.html:项目入口页面,单页面
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json:项目配置依赖(等同于python项目的reqirement.txt)

配置文件:vue.config.js

1
2
3
4
5
6
7
//https://cli.vuejs.org/zh/config/ 配置参考
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做

main.js 整个项目入口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//es6 模块导入规范,等同于python导包
//commonJs的导入规范:var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue' //根组件
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')


/*
new Vue({
el:'#app' //原来是用el:'#app',现在是new出Vue对象,挂载到#app上---》.$mount('#app')
render: h => h(App) //原来是在页面上div中写样式,现在组件化开发 把根组件(import App from './App.vue'),通过render渲染上,渲染组件的方式
}).$mount('#app')
*/

vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15