阅读 2539

使用vue写项目的准备工作【学生必看】

前言

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

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

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

正片

搭建VUE项目的准备(利用vue-cli来构建项目)

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

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

JLYLUOSPK03MUTHL1YW3%13.png

2.脚手架环境的安装

  • 在全局环境中安装 vue-cli 脚手架

     npm install -g @vue/cli
    复制代码

3.工程的创建

  • 使用命令行执行

     vue create vision
    复制代码

2.png

  • 具体的配置项如下:
  1. 手动选择特性(集成Router , Vuex , CSS Pre-processors)

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

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

6.png 5. 选择 ESLint 的配置

7.png 6. 什么时候进行 Lint 提示

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

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

10.png

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

12.png

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

13.png

  • 运行默认的项目

    cd vision

    npm run serve

  • 将目录使用 vscode 打开

  1. 删除无关代码
  • 修改 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是一个变量,对应上面的路径文件。

image.png

image.png

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

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

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

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

今天就到这里啦,vue东西还是比较多的,项目的准备工作大概就这么多吧!get到的小伙伴点赞支持支持,有哪些不足和欠缺的地方,欢迎评论区纠正!

文章分类
前端
文章标签