1. 环境
- node[https://nodejs.org/dist/v8.9.1/node-v8.9.1-x64.msi]
- vscode [https://vscode.cdn.azure.cn/stable/dcee2202709a4f223185514b9275aa4229841aa7/VSCodeSetup-x64-1.18.0.exe]
安装上面的两个软件，查看node是否安装成功的方式是执行以下命令
node -v
npm -v
npm 是和node一起安装的，执行结果如下：
node安装结果
vscode安装成功的话，桌面会有图标
vs code
2. npm 镜像
由于npm的仓储是在国外，有时候网速会慢导致安装npm包失败，故在国内使用cnpm阿里镜像，执行以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装过程，结果如下
cnpm镜像
3. vue 安装
- vue官方网站[https://cn.vuejs.org/]
- vue文档地址[https://cn.vuejs.org/v2/guide/]
- 本篇文章的学习地址：vue安装[https://cn.vuejs.org/v2/guide/installation.html]
执行命令cnpm install -g vue安装vue，执行命令cnpm install --global vue-cli安装vue-cli工具，结果如下
安装vue
4. 创建vue项目
现在vue已经安装成功，我们假设在E:\vuedemo 文件下创建项目，在命令行通过命令cd e:\vuedemo切换工作目录，按照官方文档执行以下命令
vue init webpack my-project
执行结果如下:
vue创建项目
- Project name ：项目名称
- Proejct description:项目说明
- Author: 作者
- Vue build: 默认 standalone
- Install vue-router：是否安装vue-router，输入Y，回车
- Use ESLint to lint your code： 是否安装ESLint规范代码，输入Y回车
- Pick an ESLint perset:默认 Standard
- Setup unit tests with Karma + Mocha :是否安装 Karma和 Mocha ，这两个插件是用来做单元测试的，默认安装，输入Y回车
- Setup e2e test with Nightwatch：安装e2e工具一遍进行端到端测试，默认安装，输入Y回车
5. 运行vue项目
按照以上步骤，已经成功创建vue项目，现在运行创建的vue项目，命令如下
cd my-project
cnpm install
cnpm run dev
运行结果如下
运行vue项目
此时默认浏览器会打开网址：http://localhost:8080/#/
vue运行界面
到此，表示我们的项目已经成功安装并运行
6. 项目结构
打开 vs code ，执行菜单文件->打开，选择路径E:\vuedemo\my-project，打开文件夹后，查看vue项目结构如下
image.png
src是所有的源代码，index.html是启动页面，build是编译需要的脚本代码，config是项目配置代码
7. src 文件代码
src文件夹代码如下
src代码
- assets，资源文件夹
- components,组件文件夹(页面文件夹)
- router，路由文件夹
- App.Vue，程序的主代码
- main.js，程序的入口代码
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 }
})
看第4行和第14行，表示导入了App这个vue组件，并定义一个vue实例
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>
App.Vue是整个程序的框架基础，Vue为后缀的格式说明以后学习在介绍，现在主要介绍代码，
template标签主要是html代码，是这个组件的显示部分
script 标签是整个页面代码的逻辑部分，默认使用 export defaul
style标签里是整个页面的css代码
8.Hello Word组件如何加载的
看main.js 的第5行和第 12行，表示在mian中导入了router路由，router.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
}
]
})
查看第3行和第7行，先导入HelloWord组件，在定义默认路由/信息，使用的组件是 HelloWorld,HelloWord的代码展示部分是
HelloWord
HelloWorld.Vue组件在模块App.Vue里是如何展示的呢？在App.Vue的模板标签下，有个标签叫：
<router-view/>，这里是所有路由组件加载后呈现的地方。
总结
- 学习vue的环境要求
- 学习如何安装vue
- 学习如何创建vue项目
- 学习如何运行vue项目
- 学习vue默认项目结构目录
- 学习vue的启动过程
网友评论