1.创建项目

vue create 项目名称

src中还有asset文件

public、assets文件夹区别
public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）

node_modules:放置项目依赖的地方
babel.config.js:babel配置文件
package.json：看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件

src：程序员源代码文件夹
components文件夹:一般放置非路由组件（或者项目共用的组件）
App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】

2 关闭eslint校验工具

2.1

创建vue.config.js文件：需要对外暴露 module.exports = { lintOnSave:false, }

2.2

在设置里面搜索Eslint，然后将Enable关闭（这个方法好用！）

3 src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些。

创建jsconfig.json文件（目前初始化项目时自带）

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

4 less文件

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

切记less-loader安装5版本的，不要安装在最新版本，
安装最新版本less-loader会报错，报的错误setOption函数未定义
npm install --save less less-loader@5
标签使用，不添加样式不生效
<style lang="less" scoped>

jsconfig.js添加，解决组件template报错问题  
"jsx": "preserve",

5 路由

vue-router，路由分为KV

前端路由: K即为URL（网络资源定位符） V即为相应的路由组件

 cnpm install --save vue-router@3.5.3
--save:可以让你安装的依赖，在package.json文件当中进行记录

创建路由组件【一般放在views|pages文件夹】

非路由组件使用分为几步:
第一步：定义
第二步：引入
第三步：注册
第四步:使用

5.1 路由组件与非路由组件的区别?

路由组件般放置在pages |views文件夹，非路由组件(比如全局）一般放置components 文件夹中
路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字)，非路由组件在使用的时候，一般都是以标签的形式使用
注册完路由，不管路由路由组件、还是非路由组件身上都有$route、$router属性

$route:-般获取路由信息[路径、query、 params等等]

$router:-般进行编程式导航进行路由跳转[ push| replace ]

5.2 路由的跳转

路由的跳转就两种形式：

声明式导航（router-link：务必要有to属性）

编程式导航push||replace

编程式导航更好用：因为可以书写自己的业务逻辑
项目中（一级路由：首页 登录 注册 搜索）

声明式编程式

5.3 路由传参

query参数：路由需要占位，属于URL当中一部分

params参数：路由不需要占位，写法类似于ajax当中query参数

对象常用写法
this.$router.push({
    name: "search",
    params: { keyword: this.keyword }
    query: { k: this.keyword.toUpperCase() },,//route路由中有,属于URL当中一部分 /search/:keyword
  });

使用
<h1>params参数--{{ $route.params.keyword }}</h1>
<h1>query参数--{{ $route.query.k }}</h1>

5.4 路由传递参数先关面试题

1、路由传递参数（对象写法）path是否可以结合params参数一起使用?

当我们点击跳转的时候可能出现一下几种情况：
路由不能跳转，可以在url地址栏看到query参数，控制台报错
路由能跳转，控制台爆出提示不推荐这样使用，收不到params参数
路由能跳转，控制台不报错，但是只能收到query参数
所以不可以一起使用

2、如何指定params参数可传可不传? 

比如：配置路由时有params参数，但不传递时URL有问题，指定可传或不传，在占位的后面加上一个问号
/search/:keyword?

3、params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

使用undefined解决，params可传可不传（空的字符串）
  this.$router.push({
    name: "search",
    params: { keyword: ''||undefined},//route路由中有,属于URL当中一部分 /search/:keyword
    query: { k: this.keyword.toUpperCase() },
  });

6 v-if和v-show

v-show与v-if区别?

v-show:通过样式display控制

v-if：通过元素上树与下树进行操作

所以相对而言v-show更好

首页|搜索底部是有Footer组件，而登录注册是没有Footer组件
Footer组件显示|隐藏，选择v-show|v-if
 方法一：v-show="$route.path == '/home' || $route.path == '/search'"
 方法二：添加路由元信息
 v-show="$route.meta.show"  meta：{show:true}
 第二中方法较好

Vue项目实战注意点-part1