vue-cli脚手架(框架)-白红宇

vue-cli脚手架(框架)

阅读量：4632 次

发布时间：2019-06-09

本文共 3607 字，大约阅读时间需要 12 分钟。

一、创建vue项目

npm install vue-cli -g   #-g全局(sudo)npm install vue-cli -g   #mac笔记本vue-init webpack myvue  #项目的名字cd muvuenpm installnpm run dev

二、目录结构的说明

出现下面这样的图就说明成功了

三、import和require的区别

import一定要放在文件顶部，他相当于一个指针引用了文件，并没有吧文件包含进来，需要调用文件时才引入 require可以吧文件放在任何位置，他是吧文件直接包含进来

四、设置文件路径的流程

1）建立组件（.vue的文件）2）配置路由（index.js文件中配置）3）
     4)
     5)import 包名 from "组件路径"6)comonents进行注册

五、实现异步加载

//异步vue-resource:实现异步加载数据（已经弃用）axios：实现异步加载数据npm install axios --save-devnpm install vue-axios --save-dev

六、VUE的生命周期

1、定义vue对象并实例化 2、执行created函数 3、编译模板，只会编译template的模板 4、吧HTML元素渲染到页面当中 5、执行mounted函数，（加载）相当于onload 6、如果有元素的更新，就执行update函数 7、销毁实例

六、项目实战

仿抽屉网站

ALL.vue

1 
      17 18 40 41 
      42

View Code

DETAIL.vue

1 
      17 18 43 44 
      45

View Code

DUANZI.vue

1 
       6  7 17 18 
      19

View Code

NaveList.vue

1 
       8  9 19 20 
      21

View Code

NEWS.vue

1 
       7  8 18 19 
      20

View Code

index.js

1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import HelloWorld from '@/components/HelloWorld' 4 import ALL from '@/components/All' 5 import NEWS from '@/components/NEWS' 6 import DUANZI from '@/components/duanzi' 7 import Detail from '@/components/Detail' 8  9 Vue.use(Router)10 11 export default new Router({12   routes: [13     {14       path: '/hw',15       name: 'HelloWorld',16       component: HelloWorld17     },18     {19       path: '/',20       name: 'ALL',21       component: ALL22     },23     {24       path: '/news',25       name: 'NEWS',26       component: NEWS27     },28     {29       path: '/duanzi',30       name: 'duanzi',31       component: DUANZI32     },33     {34       path: '/detail',35       name: 'Detail',36       component: Detail37     },38 39 40   ]41 })

View Code

App.vue

1 
       7  8 15 16

View Code

main.js

1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' 6 import axios from 'axios' 7 import VueAxios from 'vue-axios' 8  9 Vue.prototype.$axios = axios;10 11 //Vue.use(axios, VueAxios)12 //Vue.config.productionTip = false13 14 /* eslint-disable no-new */15 new Vue({16   el: '#app',17   router,18   components: { App },19   template: '
      '20 })

View Code

项目需要注意的问题

问题一：在手动执行webpack app/a.js publicndle.js打包时出错的解决方法需要修改为： require("style-loader!css-loader!./style.css")

问题2：脚手架生成项目后，运行 npm run dev启动项目后，

如果想把地址栏中的 #去掉，如：http://localhost:8080/#/news，需要在

router文件夹下的index.js文件中，加入 mode: "history"

问题三：引入axios的2种方法：

　　　　需要在main.js中进行设置：这2种方法都可以，但引用顺序不能翻转。