使用vue写项目的准备工作

前言

Hello大家好，学习vue的小伙伴，在学习vue-cli脚手架之前，总会遇到一些困惑，我在真正使用vue开发项目的时候，我该怎么去做？走哪些流程？

我先说一下我的学习心得：学脚手架之前，那些Vue模板语法，常用特性，组件化开发，前后端交互从Promise异步处理到接口调用fetch，然后axios到async/aweit用法，随着知识点的循序渐进的灌输，就感觉很混乱。后来Vue前端路由vue-router的引入，webpack等等。以至于我刚开始接触用vue-cli脚手架所搭建的项目，进行一些相关配置就感觉很模糊。随着后来vue项目的练习，做了两个项目才慢慢熟练掌握。

那么，今天我分享一下使用vue写项目的准备工作！

正片

搭建VUE项目的准备（利用vue-cli来构建项目）

1.安装node.js,检测版本node -v,还要检测包管理工具npm -v

这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是最新版本，以免对后续产生影响。

2.脚手架环境的安装

在全局环境中安装 vue-cli 脚手架
```
 npm install -g @vue/cli
复制代码
```

3.工程的创建

使用命令行执行
```
 vue create vision
复制代码
```

具体的配置项如下:

手动选择特性(集成Router , Vuex , CSS Pre-processors)

2. vue版本选择 3. 是否选用历史模式的路由

4. 选择 Less 作为 CSS 的预处理器

5. 选择 ESLint 的配置

6. 什么时候进行 Lint 提示

7. 如何存放 Babel , ESLint 等配置文件

8. 是否保存以上配置以便下次创建项目时使用

配置选择完之后, 就开始创建项目了, 这个过程需要一些时间:

当项目就创建完成了, 会看到这个提示

运行默认的项目

cd vision

npm run serve
将目录使用 vscode 打开

删除无关代码

修改 App.vue 中的代码,将布局和样式删除, 变成如下代码:

 <template>
     <div id="app">
         <router-view/>
     </div>
 </template> 
 <style lang="less"> 
 </style>
复制代码

删除 components/HelloWorld.vue 这个文件
删除 views/About.vue 和 views/Home.vue 这两个文件

修改 router/index.js 中的代码,去除路由配置和 Home 组件导入的代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) 
const routes = []
const router = new VueRouter({ 
    routes
})
export default router
复制代码

项目的基本配置

在项目根目录下创建 vue.config.js 文件

在文件中增加代码:

 // 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的 
 // 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件 
 module.exports = { 
     devServer: { 
         port: 8888, // 端口号的配置 
         open: true // 自动打开浏览器 
     }
 }
复制代码

axios 的处理

1.安装 axios 包

npm install axios
复制代码

2.封装 axios 对象

在 src/main.js 文件中配置 axios 并且挂载到Vue的原型对象上

 ...... 
 import axios from 'axios' 
 // 请求基准路径的配置
 axios.defaults.baseURL = 'http://127.0.0.1:8888/×××' 
 // 将axios挂载到Vue的原型对象上 
 Vue.prototype.$http = axios 
 ......
复制代码

3.使用 axios 对象在其他组件中使用： this.$http

router 配置

简单介绍一下routers中的结构，这里主要用来配置路由的，上面说过所有子路由都在App.vue下，所有App.vue是最外层的父路由，这里的routes中存的就是路由的数组，path就是你要访问你所创建的页面的路径，这里写的是根路径序所以你直接访问localhost:8080就会出现一个App.vue中插入一个ScreenPage.vue的页面（这个相当于路由嵌套），name想到与给它命名这个比较无关紧要，component相当于你要引用的页面，这里引用的是ScreenPage.vue这个页面，主要上面的import，这里的ScreenPage是一个变量，对应上面的路径文件。

1.router-link组件是用来跳转路由的，to属性是将要跳转的路由页地址。

2.router-view组件是用来展示组件页的。

3.$route.query来获取URL 查询参数，例如你有一个路由地址：/page?id=1，则有 let id= $route.query.id || -1，如果没有查询参数，则默认给了个-1的数值。

接下来就可以正式根据项目需求来写项目了！