Vue2+VueRouter2+webpack 构建项目-白红宇

1). 安装环境和npm包管理工具

检测版本

node -v npm -v

图1.png

2). 安装vue-cli(vue脚手架)

npm install -g vue-cli --registry=https://registry.npm.taobao.org

图2.png

3). 新建工程

# 在线创建vue init webpack logistics-vue# 离线创建：下载https://github.com/vuejs-templates/webpack，解压到C:\Users\mazaiting\.vue-templates\webpackvue init webpack logistics-vue --offline

若无法登陆到Github方法，可在

图3.png

4). 进入工程目录

cd logistics-vue

5). 修改package.json文件

删除这一行"chromedriver": "^2.27.2",

6). 安装依赖包

npm install

图5.png

7). 运行

npm run dev

图6.png

执行命令之后, 在浏览器中打开链接http://localhost:8080

图7.png

8). 工程目录详解

图8.png

build: 此文件夹下存放编译生成的文件

config: 配置文件夹，dev.env.js、prod.env.js、test.env.js分别是开发，生产，测试环境下的配置文件

node_modules: 依赖库

src: 源代码及资源存放路径，assets中存放资源文件，components中存放组件，router存放路由相关文件，App.vue是入口文件，main.js是项目的核心文件。全局的配置都在这个文件里面配置。

static: 未知。

test: 测试文件夹

9). 自定义页面

I. 在src目录下新建pages文件夹，并新建FirstPage.vue和SecondPage.vue文件

FirstPage.vue

SecondPage.vue

II. 在router下新建router.js文件，并配置路由

router.js

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from './../components/HelloWorld'import FirstPage from './../pages/FirstPage'import SecondPage from './../pages/SecondPage'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/FirstPage',      name: 'FirstPage',      component: FirstPage    },    {      path: '/SecondPage',      name: 'SecondPage',      component: SecondPage    }  ]})

III. 修改main.js，使其引用router.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'// 屏蔽router路径下的index.js文件// import router from './router'import router from './router/router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
     '})

IV. 修改HelloWorld.vue文件

V. 运行npm run dev

图9.gif

1). 安装环境和npm包管理工具

2). 安装vue-cli(vue脚手架)

3). 新建工程

4). 进入工程目录

5). 修改package.json文件

6). 安装依赖包

7). 运行

8). 工程目录详解

9). 自定义页面

{
{ msg }}

Essential Links

10).

1). 安装环境和npm包管理工具

2). 安装vue-cli(vue脚手架)

3). 新建工程

4). 进入工程目录

5). 修改package.json文件

6). 安装依赖包

7). 运行

8). 工程目录详解

9). 自定义页面

{ { msg }}

Essential Links

10).

{
{ msg }}