vue-cli脚手架（框架）

时间 2019-11-16

标签 vue cli 脚手架框架繁體版

原文原文链接

1、建立vue项目

npm install vue-cli -g   #-g全局
(sudo)npm install vue-cli -g   #mac笔记本

vue-init webpack myvue  #项目的名字
cd muvue
npm install
npm run dev

? Project name myvue              --项目名
? Project description A Vue.js project
? Author Mark-IT <269773075@qq.com>    --做者，默认git帐户名
? Vue build standalone                   --vue构建
? Install vue-router? Yes                --安装vue路由
? Use ESLint to lint your code? Yes      --使用eslint连接代码
? Pick an ESLint preset Standard
? Set up unit tests No                 --设置单元测试
? Pick a test runner jest                --选择一个测试运行
? Setup e2e tests with Nightwatch? Yes  --用nightwatch设置e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "myvue".

不过中途有可能会由于是国外服务器的缘故有些包安装错误，错误的时候继续执行npm installcss

好了以后执行上边黄色指令运行项目html

修改为true后，执行npm run dev，出现下面这样的图就说明成功了vue

虽然完成了，可是速度太慢了，建议使用淘宝镜像安装，快！node

首先咱们须要下载npm，由于我已经提早安装了node.js,安装包里面集成了npm，而后咱们就能够利用npm命令从获取淘宝镜像的cnpm了。 
1.打开命令行窗口，输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
获取到cnpm之后，咱们须要升级一下，输入下面的命令
cnpm install cnpm -g
由于安装Vue须要npm的版本大于3.0.0，因此咱们要升级一下，

而后咱们输入下面的命令，安装vue
cnpm install vue
接下来安装vue-cli
cnpm install --global vue-cli
此时环境就搭建好了。
2.接下来咱们须要指定一个目录存放咱们的项目，能够选择任意路径，肯定好路径后输入下面的命令
vue init webpack "项目名称"
3.成功之后，咱们进入项目所在目录
cd "项目所在文件夹"
而后依次输入下面的命令
cnpm install 
cnpm run dev

2、目录结构的说明

简单介绍：webpack

build目录是一些webpack的文件，配置参数什么的，通常不用动ios

config是vue项目的基本配置文件 git

node_modules是项目中安装的依赖模块 github

src源码文件夹，基本上文件都应该放在这里。web

　　—assets 资源文件夹，里面放一些静态资源
　　—components这里放的都是各个组件文件
　　—App.vue App.vue组件
　　—main.js入口文件 vue-router

static生成好的文件会放在这个目录下。

test测试文件夹，测试都写在这里

.babelrc babel编译参数，vue开发须要babel编译
.editorconfig 编辑器的配置文件
.gitignore 用来过滤一些版本控制的文件，好比node_modules文件夹，通常在githubpush文件的时候须要用到
index.html 主页
package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息
README.md 介绍本身这个项目的，随便写，让别人看得懂就行，看不懂就算了

详细介绍：

1、package.json
　　package.json文件是项目的配置文件，除了一些项目的基本配置信息，还有几个地方须要重点记忆
　　　　dependcies：项目发布时的依赖
　　　　devDependencies：项目开发时的依赖
　　　　scripts：编译项目时的一些命令
2、.babellrc文件：
　　.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码
　　　　{ 
　　　　　　"presets": ["es2015", "stage-2"],
　　　　　　 "plugins": ["transform-runtime"],
　　　　　　 "comments": false 
　　　　}
3、index.html
　　主页咱们能够像平时普通的html文件同样引入文件和书写基本信息，添加meta标签等。
4、main.js
　　这里是入口文件，能够引入一些插件或者是静态资源，引入以前要肯定已经安装了该插件，记录能够在package.json文件中查看
　　/*引入Vue框架*/ 
　　import Vue from 'vue' 
　　/*引入资源请求插件*/ 
　　import VueResource from 'vue-resource' 
　　/*重置样式*/ 
　　import "assets/css/base.css" 
　　/*基本JS*/ 　　
　　import "assets/js/common.js" 
　　/*引入路由设置*/ 
　　import "./routers.js" 　　
　　/*使用VueResource插件*/ 
　　Vue.use(VueResource)
5、App.vue
　　这个是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式

http://www.jb51.net/article/111658.htm

3、import和require的区别

import必定要放在文件顶部，他至关于一个指针引用了文件，并无吧文件包含进来，须要调用文件时才引入
require能够把文件放在任何位置，他是把文件直接包含进来

4、设置文件路径的流程

1）创建组件（.vue的文件）
2）配置路由（index.js文件中配置）
3）<router-link></router-link>
4)<router-view></router-view>
5)import 包名 from "组件路径"
6)comonents进行注册

5、实现异步加载

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

6、VUE的生命周期

一、定义vue对象并实例化
二、执行created函数
三、编译模板，只会编译template的模板
四、把HTML元素渲染到页面当中
五、执行mounted函数，（加载）至关于onload
六、若是有元素的更新，就执行update函数
七、销毁实例

7、仿抽屉网站

ALL.vue

<template>
  <div class='box'>
    <ul>
      <li v-for='item in arr'>
        <div class='p1'>
          <router-link :to="{path:'/detail',query:{ids:item.id}}">{{item.content}} </router-link>
        </div>
        <div class="p2">
          <img :src="item.imgUrl">
        </div>
      </li>

    </ul>

  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        arr: []
      }
    },
    mounted () {
      var url = '../../static/news.json'
      var self=this;
      this.$axios.get(url)
        .then(function (response) {
          console.log(response.data.result.data);
          self.arr = response.data.result.data;
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
.box{
  width: 980px;
}
.p1{
  float:left;
  width:780px;
}
 img{
  float:right;
 }
</style>

View Code

Detail.vue

<template>
  <div class="box">
    <h1>我是详细页面{{id}}</h1>
    <ul>
      <li>
        <div class="p1">
          {{obj.content}}
        </div>
        <div class="p2">
          <img :src="obj.imgUrl">
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Detail',
    data () {
      return {
          obj:{} ,
          id:this.$route.query.ids
      }
    },
    mounted(){
      var url = "../../static/news.json"
      var self =this;
      this.$axios.get(url,{
          params:{id:this.id}
      })
        .then(function (response) {
          //console.log(response.data.result.data);
          self.obj = response.data.result.data[0];
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
  .box{
    width: 980px;
  }

  .p1{
    float:left;
    width:700px;
  }
  .p2{
    float:right;
  }
</style>

View Code

DUANZI.vue

<template>
  <div>
    <h1> 我是段子手</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

View Code

NaveList.vue

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/duanzi">段子</router-link>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

View Code

NEWS.vue

<template>
  <div>
    <h1> 我是新闻</h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

View Code

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ALL from '@/components/All'
import NEWS from '@/components/NEWS'
import DUANZI from '@/components/duanzi'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hw',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'ALL',
      component: ALL
    },
    {
      path: '/news',
      name: 'NEWS',
      component: NEWS
    },
    {
      path: '/duanzi',
      name: 'duanzi',
      component: DUANZI
    },
    {
      path: '/detail',
      name: 'Detail',
      component: Detail
    },


  ]
})

View Code

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ALL from '@/components/All'
import NEWS from '@/components/NEWS'
import DUANZI from '@/components/duanzi'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hw',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'ALL',
      component: ALL
    },
    {
      path: '/news',
      name: 'NEWS',
      component: NEWS
    },
    {
      path: '/duanzi',
      name: 'duanzi',
      component: DUANZI
    },
    {
      path: '/detail',
      name: 'Detail',
      component: Detail
    },


  ],
  mode:"history" //去掉地址栏中的  #
})

去掉地址栏中的#

App.vue

<template>
  <div id="app">
  <NavList></NavList>
    <router-view></router-view>
  </div>
</template>

<script>
import NavList from './components/NavList'
export default {
  name: 'App',
  components: {NavList}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

View Code

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

// Vue.prototype.$axios = axios; //方式一

Vue.use(VueAxios,axios); //方式二，注册axios
//Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

View Code

项目须要注意的问题

问题一：在手动执行webpack app/a.js public

ndle.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种方法均可以，但引用顺序不能翻转。