Vue
一、安装
node.js去官网下载.msi64位，傻瓜式安装（专家建议不要装C盘）
node.js官方下载地址：https://nodejs.org/en/download/
安装好node.js之后：
1. 安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
查询当前镜像地址
cnpm get registry
修改当前镜像地址
cnpm config set registry http://registry.npm.taobao.org
2. vue-cli简介与安装
简介：
https://cli.vuejs.org/zh/guide/
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 工程化项目。
我们使用4以上版本：
cnpm install -g @vue/cli@4.1.1
测试是否安装成功：
vue -V 或者 vue --version
二、创建Vue项目
命令行输入：vue create qy156_vue02
vue create qy156_vue02
第一步：选择手动
第二步：选择下面三个，空格选中，回车进行下一步
第三步：是否使用路由器的历史记录模式？（生产中的索引回退需要正确的服务器设置），这里选择 “n”
第四步：选择Inpackage.json
第五步：是否存为项目的预设？这里选择 “n”
等待一会
成功新建项目：
vue提供了vue ui 命令以图形化界面创建和管理项目：
vue ui
打开新建的项目，目录结构如下：
npm run serve运行项目
npm run serve
启动成功：
浏览器中访问上图中路径：
三、Vue项目目录介绍
node_modules 目录
这个文件夹里面全部都是node的一些基础的依赖包，当我们拓展的安装一些别的插件时 也会装在这个文件夹里。
src 目录
这个文件夹 是整个项目的主文件夹 ， 我们的代码大部分都在这里完成。
assets 文件夹
里面主要放置一些资源文件。比如js 、css 之类的文件。
components 文件夹
可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。
组件 ！一个vue项目就是由一个个的组件拼装起来的。
router 目录
这个文件夹里的是整个vue项目的路由，vue 是单页面应用的代表，这里面就是设置一个一个组件的地址的文件。
app.vue 文件
这个文件是整个项目的入口文件，相当于包裹整个页面的最外层的div。
main.js 文件
这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。
static 目录
这个文件夹里是一些静态资源文件。
package.json 文件
npm包配置文件，定义项目的npm脚本、依赖包等信息(以json的格式)
dist 文件夹
这个dist 文件夹 是在执行了 npm run build 打包指令之后才会出现的， 整个项目写好之后，打包出来的所有文件都会在这里，只需要访问文件夹里的index文件可以进入应用了。
四、路由的简单使用
通过cli创建好vue项目后
1. 在views目录下创建自己的页面Goods.vue
Goods.vue
<template>
<div>
HTML代码写这里
</div>
</template>
<script>
export default {
name: ""
}
</script>
<style scoped>
</style>
2. 在路由表中添加路由
添加路由：
{
path: '/goods',
name: 'Goods',
component: () => import('../views/Goods.vue')
}
如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/goods',
name: 'Goods',
component: () => import('../views/Goods.vue')
}
]
const router = new VueRouter({
routes
})
export default router
3. 将路由添加到main.js中
路由router默认已经添加
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')
4. 在App.vue中使用路由
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/goods">Goods</router-link>
</div>
<router-view></router-view>
</div>
</template>
<router-view></router-view>是显示区域
浏览器显示结果：
说明：
vue文件同我们之前的HTML文件有些许不同
vue文件的格式：
<template>
</template>
<script>
export default {
name: ""
}
</script>
<style scoped>
</style>
<template>标签中写HTML代码
<script>标签中写之前的js代码
格式也有所不同
<script>
export default {
props: {//注册属性 父传子 数据传递
},
data() {
return {};//定义数据
},
created(){//created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
},
methods: {//方法事件处理
},
components: {//组件注册
},
};
</script>
<style>标签中写之前的css样式
<style>
.cla{
color:red;
}
</style>