项目初始化：
要初始化一个项目，首先要安装node环境以及npm(nodejs下的包管理工具)或者yarn工具。
步骤：
1、 新建文件夹，在文件目录中输入cmd，回车就进入到了此项目
2、 使用命令vue create + 项目名称去初始化项目，我选择的是vue2，然后回车，它会从github上去拉取代码
3、 代码拉取完毕以后cd到这个项目下，使用yarn serve去运行项目，如果运行成功就没什么问题
补充：这样运行需要我们复制地址去运行，如果在package.json中加上–open会自动在默认浏览器打开项目，比较方便一点
配置其他文件：
1、 去除eslint, 在开发过程中eslint会给我们带来很多麻烦，我们在开发过程中先去关掉eslint
方法：新建文件vue.config.js(文件名字一定要写对)写入
module.exports = {
lintOnSave: false
}
2、 给src取别名，方便以后路径选取，在根目录下创建jsconfig.json文件，写入下面代码
{
“compilerOptions”:{
“baseUrl”:"./",
“paths”:{
“@/ ":[
"src/ ”
]
}
},
“exclude”: [
“node_modules”,
“dist”
]
}
这样我们就初始化好了一个项目
认识目录：
了解目录各个文件的作用可以有效帮助我们开发
1、 node_moudles
简而言之它是依赖，node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。文件内容可能是我们封装好的一些JavaScript方法、json数据、编译过的C/C++拓展等，在关于node.js的误会提到过node.js的架构。其中http、fs、net等都是node.js提供的核心模块，使用C/C++实现，外部用JavaScript封装。require搜索module方式。
2、public
public放不会变动的文件 public建议放一些外部第三方
3、 src
assets | 静态资源(图片，js，css）
components | 非路由组件
views/pages ｜ 路由组件
router | 路由配置
store ｜ vuex（仓库）
App.vue | 加载的第一个组件（主入口文件）
main.js | 全局文件
路由配置和跳转：
首先我们要知道组件分为路由组件和非路由组件
组件要使用有四个步骤：编写-------导入--------注册--------使用
非路由组件
：分别写Footer和Header文件夹，里面写入index.vue文件
写好以后在主入口文件中导入，注意是script标签内
import Header from ‘./components/Header’
import Footer from ‘./components/Footer’
注册：export default {
name:’’,
components:{
Header,
Footer
}
}
使用标签形式使用
路由组件：
注意：不管是是路由组件还是非路由组件，他们都有$ route(一般获取路由信息)和$router(一般用于编程式导航跳转)属性
1 在pages中新建四个文件夹，分别写入各部分内容
2 在src下面新建route文件夹，里面新建index.js文件，导入各个组件
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter);
import Home from ‘…/pages/Home’
import Login from ‘…/pages/Login’
import Register from ‘…/pages/Register’
import Search from ‘…/pages/Search’
export default new VueRouter({
routes: [{
path: “/home”, //路径名称
component: Home //对应的组件
},
{
path: “/login”,
component: Login
},
{
path: “/register”,
component: Register
},
{
path: “/search”,
component: Search
},
{
path: “*”,
redirect: “/home”//路径重定向：保证一点开就是主页
]
})
http://localhost:8080/改变后面的路径可以跳转到不同的路径
但是在实际开发过程中不可能让用户去手动输入各个组件的路径，于是有了路由跳转
1，声明式导航：router-link跳转，后面加to指向要跳转的页面，其实就相当于a标签
2，编程式跳转(用的较多，功能更强大)： <button @click=“goSearch”/>跳转到搜索页面
export default{
name:"",
methods:{
goSearch(){
this.$router.push(’/search’)
}
}
}
运行以后点击就可以跳转到了search页面
