vue前台项目（一）
一， 使用Vue脚手架
1.1. 使用脚手架创建模板项目
1) vue-cli是vue官方提供的脚手架工具 command line interface
2) 最新的版本是4,
3) 3.x版本与4.x版本变化不大, 但3.x相对于2.x的版本变化特别大
4) 在线文档: https://cli.vuejs.org/zh/
1.1.1. 创建vue项目
1) 创建脚手架4/3的vue项目, 并运行
npm install -g @vue/cli //安装脚手架
vue create vue-demo //创建脚手架名称
npm run serve //开发环境自动启动项目
npm run build 打包文件
检查版本；vue --version
vue-cli3脚手架项目结构
gshop
|-- node_modules
|-- public
|-- index.html: 主页面文件
|-- src
|-- main.js: 应用入口js
|-- babel.config.js: babel的配置文件
|-- vue.config.js: vue的配置文件，需要手动添加
|-- .gitignore: git版本管制忽略的配置
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的readme文件
此时，webpack配置文件已经隐藏，不让修改，如果我们需要修改配置文件，修改vue.config.js,相当于修改webpack配置文件，用的是common.js模块语法
1.1.1. 本地测试运行打包项目
npm install -g serve
serve dist -p 5000
访问: http://localhost:5000
1.1. eslint
1.1.1. 说明
1) ESLint是一个代码规范检查工具
2) 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示
3) 官网: http://eslint.org/
4) 基本已替代以前的JSLint
1) vue.config.js: 关闭规则检查，整体关闭
// 关闭ESLint的规则
lintOnSave: false,
module.exports = {
lintOnSave: false
}
jsconfig.json配置别名@提示
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
注；@代表从src目录下找
1. Header和Footer是固定的所以是非路由组件，拆分该组件，拆分less样式，但是vue脚手架没有安装less,
安装less, npm i less less-loader -D, 不需要配置，安装完后，vue脚手架会自动配置
2.html中引入reset.css,清除默认样式，
3.新建pages路由文件夹-,home(index.vue), login(index.vue), register(index.vue), search(index.vue),
4.新建router路由文件夹, index.js(路由配置文件)， routes.js(路由配置对象)，安装路由插件
安装 npm i vue-router -S
routers.js路由配置对象配置好了，在index.js中引入即可
// 引入路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
// 暴露路由数组
export default [
{
path:'/home',
component:Home
},
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
},
{
path:'/search',
component:Search
},
//重定向
{
path:'/',
redirect:'/home'
}
]
import Vue from 'vue'
import VueRouter from 'vue-router'
// 配置路由插件
Vue.use(VueRouter)
//引入路由对象
import routes from '@/router/routes'
export default new VueRouter({
routes
})
5，在login,register, home,设置申明式路由， 在search中设置编程式路由,路由传参
<router-link to="/login" >登录</router-link>
<div class="searchArea"> <form action="###" class="searchForm"> <input type="text" id="autocomplete" class="input-error input-xxlarge" v-model="keyword"/> <button class="sui-btn btn-xlarge btn-danger" type="button" @click="toSearch">搜索</button> </form> </div>
methods:{
toSearch(){
//
// this.$router.push(`/search/${this.keyword}?keyword=${this.keyword.toUpperCase()}`)
//如果使用对象：
//传递params参数必须和name配合
//path和params无法配合使用
//path和query是可以使用的
//name和query也是可以的
//以后尽量写name
this.$router.push({
// path:'/search',
name:'search',
query:{
keyword1:this.keyword.toUpperCase()
},
params:{
//如果传递params参数是一个空串，那么路径会有问题，传过去如果是undefined就没事
keyword:this.keyword || undefined
}
})
}
注；1. 如果params参数是空窜，那么search路由组件的内容不会显示，此时需要在该路由对象中的params中配置一个？
{
path:'/search/:keyword?',
component:Search,
name:'search',
props: route => ({keyword:route.params.keyword,keyword1:route.query.keyword1})
},
2.如果this.$router.push(）是对象形式，如果用对象形式传参，params传的空窜，导航路径不正确，此时需要在params参数设置下
params:{
//如果传递params参数是一个空串，那么路径会有问题，传过去如果是undefined就没事
keyword:this.keyword || undefined
}
3. 利用props简化路由传参， 在路由对象中配置props函数
{
path:'/search/:keyword?',
component:Search,
name:'search',
props: route => ({keyword:route.params.keyword,keyword1:route.query.keyword1})
},
4.在路由组件中用props接收参数
props:['keyword','keyword1']
