使用vue写项目的准备工作

使用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
  复制代码

• 具体的配置项如下:

1. 手动选择特性(集成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 打开

4. 删除无关代码

• 修改 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的数值。

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