黑马程序员技术交流社区

标题: 【上海校区】java-js知识库之十一——构建vue项目及基本使用 [打印本页]

---

作者: 不二晨    时间: 2019-1-4 09:44
标题: 【上海校区】java-js知识库之十一——构建vue项目及基本使用
本篇将记录vue项目的构建以及基本使用。

一、安装脚手架工具

请先安装npm工具。

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

C:\Users\Administrator>npm install --global vue-cli
1
命令行输入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]
1
2
3
4
5
6
7
8
9
10
11
12
13
如图，安装成功，卸载脚手架命令：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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
此时在目录下创建了名为vuetest的项目：



三、测试

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

D:\java\android\vuetest>npm install
1
完成后，项目中出现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
1
2
3
4
5
6
7
8

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

四、ip访问

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

--host 0.0.0.0
1

重启项目通过ip访问：

ip访问成功。

五、路由跳转

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

D:\java\android\vuetest>npm install vue-router
1
安装完成后进行路由配置：
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)
})
1
2
3
4
5
6
7
8
9
10
11
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
---------------------
转载，仅作分享，侵删
作者：这是个什么
原文：https://blog.csdn.net/qq_37926711/article/details/85642007

---

作者: 不二晨    时间: 2019-1-10 10:27
奈斯，加油

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2