我们点击npm run dev的时候，这就是启动Vue工程项目，那么它启动过程是什么样的呢？Vue项目启动过程，本文简要介绍。
一：Vue项目启动过程，步骤如下：
image.png
1. package.json
在执行npm run dev的时候，会在当前目录中寻找 package.json 文件，包含项目的名称版本、项目依赖等相关信息。
{
# 版本信息
"name": "xxx",
"version": "1.0.0",
"description": "oooo",
"author": "夏营 <king.xia@huolala.cn>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "node build/build.js"
},
"dependencies": {
# 项目依赖
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
# 项目依赖
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
# node、npm版本要求
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
2. webpack.dev.conf.js
从下图中可以看到， 启动npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server。
image.png
3. config/*.js
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括config目录下服务器环境的配置文件。
image.png
4. config/index.js
可以看到，在index.js 文件中包含服务器host 和port 以及入口文件的相关配置，默认启动端口是8080，这里可以进行修改。
image.png
5. index.html
index.html的内容很简单，主要是提供一个div 给vue 挂载。
image.png
6. main.js
main.js中， 引入了 vue、App和router模块， 创建了一个 Vue 对象，并把 App.vue模板的内容挂载到 index.html的 id 为app 的 div 标签下， 并绑定了一个路由配置。
image.png
7. route / App.vue
上面 main.js把 App.vue 模板的内容，放置在了index.html 的 div 标签下面。查看 App.vue的内容我们看到，这个页面的内容由一个 logo和一个待放置内容的router-view，router-view 的内容将由router 配置决定。
image.png
8. route / index.js
查看route 目录下的index.js，我们发现这里配置了一个路由， 在访问路径/ 的时候， 会把 HelloWorld 模板的内容放置到上面的router-view中。
image.png
9. HelloWorld.vue
HelloWorld 中主要是一些 Vue介绍显示内容。
image.png
10. 页面组成
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
image.png
二：配置(这步非必须要做，可做可不做)
到这，我们开始安装router、vuex。
Ctrl+C退出启动，继续执行vue-cli，脚手架安装插件router和vuex开始。
1. 安装插件router
vue add router
输入一个大写Y，按下Enter
2. 安装插件vuex
vuex 是专门为 Vue.js 设计的状态管理库，以利用Vue.js的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
- state：包含了store中存储的各个状态。
- getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。我们在组件中使用 $sotre.getters.fun()
- mutations: 一组方法，是改变store中状态的执行者，只能是同步操作。修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions: 异步操作。在组件中使用是$store.dispath('')
*modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
①安装vuex
cd '/Users/hll/Desktop/测试x/xxxxYYYY'
npm run dev
image.png
接下来我们在src目录下创建一个vuex文件夹
并在vuex文件夹下创建一个store.js文件
文件夹目录长得是这个样子
image.png
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装vuex。
npm install vuex --save
//如果装了淘宝镜像，就是使用下面这个命令，更快
cnpm install vuex --save
②vuex的关系图
image.png
③开始使用，在mian.js中，引入vuex
④然后告知vue开始使用vuex(Vue.use(Vuex))
在store.js文件中，引入vuex并且使用vuex，这里注意我的变量名是大写Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 0
}
export default new Vuex.Store({
state
})
⑤接下来，在main.js中引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
image.png
网友评论