java-js知识库之十一——构建vue项目及基本使用

本篇将记录vue项目的构建以及基本使用。

一、安装脚手架工具

请先安装npm工具。

命令行输入npm install --global vue-cli

C:\Users\Administrator>npm install --global vue-cli

命令行输入vue，查看是否安装成功

C:\Users\Administrator>vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

如图，安装成功，卸载脚手架命令：npm uninstall vue-cli -g。

二、创建vue项目

进入目录，命令行输入vue init webpack-simple vuetest

D:\java\android>vue init webpack-simple vuetest

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name vuetest
? Project description A Vue.js project
? Author 
? License MIT
? Use sass? Yes

   vue-cli · Generated "vuetest".

   To get started:

     cd vuetest
     npm install
     npm run dev

此时在目录下创建了名为vuetest的项目：

三、测试

进入项目目录，在项目目录下有名package.json的文件，此文件包含了项目所需的所有依赖，命令行输入npm install添加依赖：

D:\java\android\vuetest>npm install

完成后，项目中出现node_modules的文件夹，所有的依赖插件都在此目录下，命令行输入npm run dev启动项目：

D:\java\android\vuetest>npm run dev

> vuetest@1.0.0 dev D:\java\android\vuetest
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

项目启动成功，vue项目创建成功。

四、ip访问

此时项目无法通过ip地址访问，修改package.json文件，添加如下代码：

--host 0.0.0.0

重启项目通过ip访问：

ip访问成功。

五、路由跳转

vue的页面跳转和h5不同，通过路由跳转。
安装路由，命令行输入npm install vue-router

D:\java\android\vuetest>npm install vue-router

安装完成后进行路由配置：
1.新建router.js，里面存放所有的路由信息，下面是配置信息，代码里有详细注释：

import Vue from 'vue';//引入vue
import VueRouter from 'vue-router';//配置路由插件
Vue.use(VueRouter);//使用路由插件

//创建组件,之后所有的组件都会在这创建，稍后会创建Cordova.vue组件
import Cordova from './Cordova.vue';

//配置路由数组，path值为路由跳转路径，component为跳转的组件
const routes = [
    { path: '/tocordova', component: Cordova }
]

//实例化路由
const router = new VueRouter({
    mode: 'history', 
    routes 
})
//将路由暴露出去
export default router;

2.修改main.js，只需修改两行引入路由、挂载路由：

import Vue from 'vue'
import App from './App.vue'

//引入路由
import router from './router.js';

new Vue({
  el: '#app',
  router,//挂载路由
  render: h => h(App)
})

3.创建Cordova.vue组件

<template>
  <div id="cordova">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello cordova!!!'
    }
  }
}
</script>

<style lang="scss">

</style>

3.重启项目访问

4.点击cordova链接

如图所示，路由已跳转。
项目打包命令：npm run build

D:\java\android\vuetest>npm run build

> vuetest@1.0.0 build D:\java\android\vuetest
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 860f88d3e5edef94d9e1
Version: webpack 3.12.0
Time: 6556ms
       Asset     Size  Chunks             Chunk Names
    build.js   125 kB       0  [emitted]  main
build.js.map  1.03 MB       0  [emitted]  main