vue使用理解（1）

vue创建项目，使用，理解。

1.搭建环境

需要node.js然后安装相关依赖，安装全局vue-cli

说明：默认环境已经搭建完成

2.创建项目

1.cmd选择路径（你要放置项目的位置）

2.cmd里输入vue init webpack hpTest（hpTest是你自己创建的项目名）

3.项目选项见下图

重点：Install vue-router？选项一定要选择y（不选后期要配置vue-router相关项。）

说明：下图中的是未选择的，为了简化问题，本人又重新建了一个项目，选择了vue-router，后续将以安装vue-router的项目说明。如果愿意可以新建两种项目，对比目录结果的异同。



3.安装依赖

1.cd到你的项目下面

2.cmd中输入cnpm install

说明一下npm install和cnpm install 都是安装依赖包，npm服务器在国外，下载太慢。利用cnpm install下载淘宝提供的。两者功能一样，使用其中一个命令即可。

4.测试项目是否搭建成功

1.在cmd中输入npm run dev

见下图



2.启动成功在浏览器会出现对应界面

以上只是流程介绍，有问题自行百度。

项目开发工具本人使用Visual Studio Code（自行解决）

项目目录结构见下图



问：运行npm run dev后，过程中读取了哪些文件，经过了哪些步骤后，最终访问到入口文件？

答：使用vue.js官网提供的脚手架工具并沿用默认配置的话，你执行npm run dev的时候会出来页面，是因为你根目录下的package.json文件里script配置了”dev”: “node build/dev-server.js”，然后读取这个文件，通过里面的配置继续读取文件最后到达main.js这个入口文件

具体过程如下package.json>dev-server.js>webpack.dev.conf>webpack.base.conf(在这个文件中配置了app: ‘./src/main.js’)

问：index.html main.js app.vue文件的关系？

答：main.js是入口文件，初始化vue并配置相关组件。进入到vue文件，app.vue是具体组件，最后显示在index.html.（大致流程是这样）

先看main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

import：引入文件，就像引用js，css文件一样

App：引入App这个组件

router：引入路由配置

new Vue：相当于初始化，里面的配置意思是使用{App}组件，并且用这个标签包含（组件内容放入标签中），在页面ID为app的标签中使用这个组件。router是路由注入，通过路径选择资源，配置写在了index.js文件里。

再看index.js文件代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
}
]
})

Vue.use(Router):声明使用Router组件。

router：[]是具体的路由配置。

说明：因为在路由配置里使用了HelloWorld组件，所以要import这个组件。@是路径，在配置文件中有具体的配置。

再看App.vue文件

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>

<script>
export default {
name: 'app'
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

template标签:模板组件

前面在main中声明的内容都会在template的id为app的router-view标签中显示

script标签:脚本

style标签:样式

理解：html页面中的内容对应填充（只为了更好的理解）

以上就是执行npm run dev之后看到页面的整个过程。