Vue-cli项目搭建
创建vue项目
在之前的vue学习中，都是在html中编写的，但是在一个vue项目中，都是以vue后缀的文件编写组件的。
创建vue项目需要node.js环境，node.js是一款后端语言。
第一步：安装node.js，下载地址：下载 | Node.js 中文网 (nodejs.cn)，一路下一步，安装完成后会自动添加到环境变量中，这个时候你的cmd就会多了两个命令：
- node：进入node.js环境
- npm：安装模块用
第二步：安装vue-cli，打开cmd窗口输入
npm install -g @vue/cli
如果下载慢，可以用以下命令：
npm install -g @vue/cli --registry=https://registry.npm.taobao.org
或者
# 先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后都用cnpm替代npm使用
cnpm install -g @vue/cli
第三步：创建vue项目，会在当前目录创建。
vue create 项目名
这时候会出现配置选择，通过方向键上下选择，回车确认。
继续方向键选择，按空格选中，选中如图三个选项，回车确认。
选择vue版本，这里我选2.x
然后输入y。
选择第二个。
最后选择是否保存当前的配置选择，输入y保存，输入n取消。保存后以后创建vue项目可以直接用保存好的配置，较方便。
这时候就创建完毕了。
第三步的另外一种方式：使用图形化界面创建vue项目，打开cmd窗口输入：
vue ui
运行后会出现一个地址，访问地址，创建流程如下：
第四步：运行vue项目
-
方式一：cmd窗口cd到你创建的项目内，执行
npm run serve -
方式二：使用pycharm、HbuildX等应用打开vue项目运行。
vue项目目录结构
项目名
├── node_modules -- 项目的依赖
├── public -- 文件夹
├ ├── favicon.ico -- 网站顶部小图标
├ └── index.html -- 单页面开发，项目唯一页面
├── src -- 文件夹，主要代码都在里面
├ ├── assets -- img，js，css，都可以放在这里
├ ├── components -- 小组件，放在页面组件中的
├ ├── store -- 安装了vuex就会生成
├ ├── router -- 安装了vue-router就会生成，配置路由
├ ├── views -- 页面组件存放在这
├ ├── App.vue -- 根组件，靠它和唯一的页面连接的
├ └── main.js -- 整个项目的入口
├── .gitignore -- git版本管理
├── babel.config.js -- babel的配置，不用管
├── jsconfig.json
├── package.json -- 项目的配置，和依赖的模块都在这
├── package-lock.json
├── README.md -- 项目的介绍
└── vue.config.js -- vue的配置信息
项目传给别人，node_modules这个文件夹要删掉，别人通过npm install 生成，装好该项目的依赖。
es6导入导出语法
在一个js文件中想要使用另一个js文件中的变量、函数等，就要用到导入导出语法。
导出
每个模块中，只允许使用唯一的一次export default，否则会报错。
export default 对象
导入
js后缀不用写，如果文件夹内有一个index.js，只导入文件夹，就相当于导入了文件夹下的index.js。
// 全部导入
import 起个名字 from 'js文件名'
// 单独导入
import {变量} from 'js文件名'
举例：
a.js:
const name = 'ton'
const age = 18
export default {
name:name
}
b.js：
import aa from './a'
console.log(aa.name) // 正常取出
console.log(aa.age) // 没有值，因为没导出
单页面组件写法
vue项目中的每一个vue后缀的文件都是一个组件。
一个vue组件包含以下内容：
- template：html内容
- script：js内容
- style：css样式
比如Vue项目views文件夹下的HomeVie.vue文件：
<template>
<div class="home">
<h1>{{ aa }}</h1>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @就相当于/src，这里导入HelloWorld.vue组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
// 组件属性写在这
data() {
return {
aa: 'abcd'
}
},
components: {
HelloWorld
}
}
</script>
<!--scoped表示这个css样式只作用于当前组件-->
<style scoped>
img {
width: 100px;
}
</style>
vue-router路由使用
vue-router是第三方插件，可以通过访问路由实现组件间的切换。
vue项目创建好后，在默认情况下，根路由显示的是HomeView.vue组件，/about路由显示的是AboutView.vue组件。这个就是通过vue-router实现的。
使用
1.需要在根组件(App.vue)中添加标签：默认已经添加了
<router-view/>
2.创建页面组件，一般页面组件放在views文件夹内
MyView.vue：
<template>
<div>
<h1>这是MyView</h1>
</div>
</template>
<script>
export default {
name: "MyView"
}
</script>
<style scoped>
</style>
3.然后到router文件夹-->index.js中配置路由：除了两个默认的路由，添加自己的路由
import MyView from "../views/MyView";
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
// 配置自己的路由
{
path: '/my', // 路由地址
name: 'my', // 别名
component: MyView // 导入的组件名称
}
]
这时候访问/my路由就会显示MyView.vue组件的内容了。
4.编写可以跳转到/my路由的标签，我这里写在App.vue内，你也可以写在其他地方。
- 方式一：在html中写
<template>
<div id="app">
<router-link to="/my">My</router-link>
<router-view/>
</div>
</template>
<template>
<div id="app">
<a href="/my">My</a>
<router-view/>
</div>
</template>
对比<a>，<router-link>避免了不必要的重渲染，它只更新变化的部分从而减少DOM性能消耗。
- 方式二：在js中写，编写事件触发
this.$router.push('/my')
window.location.href="/my"
同样，用window.location.href会有不必要的重渲染。
