现代化的 vue 项目

目前为止，我们的 vue 的讲解都是通过 cdn 的方式去弄的。
而现代化的 vue 项目，用的是构建工具打包工具 npm 相关的方式。

构建打包工具使用的是 webpack 。

可以理解为与 gulp 类似的东西

使用 vue 官方的脚手架工具（@vue/cli）快速搭建现代化的 vue 项目

什么叫脚手架呢？

快速搭建项目的工具

如何使用
1. 全局安装工具

$ npm install @vue/cli -g

全局安装完成之后，提供了一个 vue 的命令。使用 vue -V 来查看一下脚手架版本

$ vue -V

@vue/cli 4.3.1
注意：不要把脚手架的版本与 vue 核心的版本搞混了

使用 vue 命令创建一个项目
1. 先在要创建项目的文件夹下打开 cmd
2. 运行如下命令

$ vue create 项目名字
注意，不要使用 git bash 来操作，git bash 不能上下键

脚手架创建的项目的基本文件介绍

node_modules 项目依赖包
public 静态资源文件，里面默认有一个 index.html 和一个 favicon.ico。这里存放的是不需要被构建工具处理的。比如一个css。我们直接通过 link 的方式去引入
- favicon.ico 当前项目的浏览器的小图标
- index.html 整个项目的入口页面，这个文件中只提供了一个挂载点元素，js内容都是构建工具去处理的
src 项目的源代码文件夹 （放在这个文件夹中的内容我们认为都是需要被构建工具处理的文件）
- assets 静态资源文件。需要被构建工具处理的
- components 存放公用的vue组件的文件夹
  - HelloWorld.vue 一个单文件组件
- App.vue 项目的万年老二组件
- main.js 整个项目的入口js文件 。构建工具打包生成js文件的起点就是它。
.gitignore git 的忽略文件的设置文件。脚手架创建的项目，默认做了git初始化
babel.config.js babel相关的配置文件。（转换es6、es7、es8等高级语法到es5的一个工具）
package-lock.json 依赖锁文件
package.json 项目描述文件，里面有依赖项的配置
READMD.md 读我。接手一个项目，第一件事情，就是看 README.md

构建打包工具使用的是 webpack 。

两个常用的 UI 组件库

vant element

1.node.js 安装 ( 电脑管家 )

 $ node -v  // 检测node安装
 $ npm -v   // 检测 npm 工具包

2.git安装(电脑管家) 用来上传代码等

3. 安装 vscode （编译器）

创建vue项目

// 全局安装工具
$ npm install @vue/cli -g

2 .全局安装完成之后，提供了一个 vue 的命令。使用 vue -V 来查看一下脚手架版本

$ vue -V  // 大写的V

    @vue/cli 4.3.1    注意： 不要把教手架的版本与核心的版本搞混了

3.使用vue命令创建一个项目

1. 先在要创建项目的文件夹下打开 cmd运行如下命令
  2. 运行如下命令
```
$ vue create 项目名字
```

注意，不要使用 git bash 来操作， git bash 不能上下键
咧：第一步：创建 app-app 的项目

           第二步  点击回车就可以默认选中第一个
    : 出现这个 就是已经成功了

4.脚手架创建的项目的基本文件介绍

- node_modules  项目依赖包
- public                  静态资源文件，里面默认有一个 index.html      和 一个 favicon.ico。这里存放的是不需要被构建工具处理的。比如一个css。我们直接通过 link 的方式去引入
  - favicon.ico    当前项目的浏览器的小图标
  - index.html    **整个项目的入口页面**，这个文件中只提供了一个挂载点元素，js内容都是构建工具去处理的
- src    项目的**源代码文件夹** （放在这个文件夹中的内容我们认为都是需要被构建工具处理的文件）
  - assets   静态资源文件。需要被构建工具处理的
  - components   存放公用的vue组件的文件夹
    - HelloWorld.vue 一个单文件组件
  - App.vue    项目的万年老二组件
  - main.js        **整个项目的入口js文件** 。构建工具打包生成js文件的起点就是它。
- .gitignore     git 的忽略文件的设置文件。脚手架创建的项目，默认做了git初始化
- babel.config.js   babel相关的配置文件。（转换es6、es7、es8等高级语法到es5的一个工具）
- package-lock.json    依赖锁文件
- package.json            项目描述文件，里面有依赖项的配置
- READMD.md             读我。接手一个项目，第一件事情，就是看 README.md

第一步先把 package.json

"scripts": {
  "start": 'npm run serve'  // 运行就是直接  npm start
}

配置代理防止跨域新建 vue.config.js 文件
下载 axios 用来请求数据
1. 自己封装方法 ``` $ npm install axios -S

// 新建一个文件 utils/fetch.js import axios from ‘axios’

let baseURL_dev = ‘http://localhost:8080‘ // 解决跨域问题 // let baseURL_pro = ‘’ // 公司域名 // let baseURL_test = ‘’ // 内网地址

// 创建axios实例 const fetch = axios.create({ baseURL: baseURL_dev, timeout: 7000, // 超时设置 headers: { ‘Content-Type’: ‘application/json;charset=UTF-8’ } })

// 封装请求拦截器 fetch.interceptors.request.use((config) => { // 在这里做一些检测或者包装等处理 // console.log(‘请求拦截’, config) // 鉴权 token添加 config.headers.Authorization = localStorage.getItem(‘token’) || ‘’ return config })

// 封装响应拦截器 fetch.interceptors.response.use((response) => { // 请求成功 // console.log(‘响应拦截’, response) // 数据过滤，根据后端标识字符来进行数据 if (response.data && response.data.err==0) { return response.data } else { console.log(‘网络异步，请稍后再试’) } }, (error) => { // 请求失败 return Promise.reject(error) })

export default fetch


   1. 调用方法的时候 :
```javascript
utils/api  这个文件里写
import fetch from './fetch'
// 例如这两个方法 让他导出去
// 获取所有商品信息
export function getGoodList(params) {
  return fetch({
    url: '/jd/getHotGoodList',
    method: 'GET',
    params
  })
}
// 获取所有分类名
export function getCates(params) {
  return fetch({
    url: '/jd/getAllCates',
    method: 'GET',
    params
  })
}
// 导出去
export default {
  getGoodList,
  getCates
}

最后记得在 app.js 挂载到原型：

// 加这个  
import http from './utils/api' 
Vue.prototype.$http = http

然后调用数据的时候：

this.$http.getGoodList( params ).then(res => console.log(res))
这个getGoodList 是在 utils/api 写的方法

rem布局问题（移动端要用）写一个 js文件
```
写在public /rem.js
```
```
 
```
```

function resetRootFZ(){
var oHtml = document.querySelector(‘html’);
var w = oHtml.getBoundingClientRect().width;
// 设置根字体的大小等于html节点的宽度的十分之一
oHtml.style.fontSize = w/10 + ‘px’;
}
resetRootFZ()
// 当window窗口尺寸变化时，重新设置根字体的大小
window.addEventListener(‘resize’,function(){
resetRootFZ()
});


然后在vscode 插件里   px-to-rem 配置  ：
   1. sass安装  node-sass  -S    sass-loader -S  (要安装两个)

下载 cnpm : $ npm install -g cnpm —registry=https://registry.npm.taobao.org

$ cnpm install node-sass —save-dev

$ cnpm install sass-loader —save-dev


   1. router 安装  (路由配置)

$ cnpm install router -S


   1. Vuex安装  (全局状态管理)

$ cnpm install Vuex -S ```

一些插件

monent 处理时间戳
nprogress 进度条

Vuex

一： vuex 是什么

** vue 官方提供的状态管理器，用于处理全局的数据共享问题的

二： vuex 的仓库中的五大核心概念
state 专门存共享数据的地方
getter 可以针对现有的state 数据或者其余的 getter 做的一个二次计算，可以理解为仓库中的计算属性
mutation 唯一能够修改 state 数据的东西，不允许写异步代码
action 它里面可以写异步代码，它如果要修改 state 数据，是通过去调用 mutation
module 仓库模块的拆分、
三：组件中如何使用 state 与 getter
方案一：使用挂载到 Vue原型上的 $store 对象，这个 $store 就是 new Vue.store() 生成的仓库实例对象
mapState 计算属性接收一个数组做为参数，参数中的每一项，就是在仓库中 state 数据
mapGetters 辅助函数

mapState 接收一个数组做为参数，参数中的每一项，就是在仓库中的 state 数据
mapState ([ state1, state2, state3])

mapGetters 接收一个数组作为参数，参数中的每一项，就是在仓库中的 getter 数据
mapGetters( [getter1, getter2])

Vue router路由

路由的概念就是，能够通过不同的请求地址来响应不同的页面或数据

视图： router-view 路由坑路由匹配到的组件将渲染在这里

导航： router-link 路由跳转相当于a标签没有a标签的#号而且还自带样式 .router-link-active 还有起到跳转作用

一： $ npm install vue-router 引入： import Vue from ‘vue’ import VueRouter from ‘vue-router’ // 引入 Home组件 import Home from ‘../view/Home’ // 注册 Vue.use(VueRouter) // 定义路由 const router = new VueRouter({ routes: [ path:’/‘ // 地址 component: Home // 组件名 ] }) // 将这个导出去 export default router

动态路由匹配:

{
// 动态路径参数，以冒号开头
path: ‘ /user/:id’
}

嵌套路由

/user/foo/profile

编程式的导航

router.push(‘/路径’)
router.replace(‘/路径’)
push 和 replace 区别：跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式

router-link :to=’/url路径’

重定向:

path: ‘/a ‘ , redirect : ‘ /b ‘ 把/a 重定向到/b
重定向的目标也可以是一个命名的路由： { path: ‘/a’, redirect: { name: ‘foo’ }}

甚至是一个方法，动态返回重定向目标：
{ path: ‘/a’, redirect: to => { // 方法接收目标路由作为参数 // return 重定向的字符串路径/路径对象 }}

错误代码本

Vue 工程环境搭建

现代化的 vue 项目

构建打包工具使用的是 webpack 。

使用 vue 官方的脚手架工具（@vue/cli）快速搭建现代化的 vue 项目

脚手架创建的项目的基本文件介绍

1.node.js 安装 ( 电脑管家 )

2.git安装(电脑管家) 用来上传代码等

3. 安装 vscode （编译器）

3.使用vue命令创建一个项目

4.脚手架创建的项目的基本文件介绍

一些插件

Vuex

Vue router路由

动态路由匹配:

嵌套路由

编程式的导航

声明式

重定向: