1). 安装Node环境和npm包管理工具
- 检测版本
node -v
npm -v
图1.png
2). 安装vue-cli(vue脚手架)
npm install -g vue-cli --registry=https://registry.npm.taob
ao.org
图2.png
3). 新建工程
# 在线创建
vue init webpack logistics-vue
# 离线创建：下载https://github.com/vuejs-templates/webpack，解压到C:\Users\mazaiting\.vue-templates\webpack
vue init webpack logistics-vue --offline
若无法登陆到Github方法，可在此处下载
图3.png
4). 进入工程目录
cd logistics-vue
-
目录结构
图4.png
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
<template>
<div class="container">
firstPage
</div>
</template>
<script>
/* eslint-disable quotes */
export default {
name: "first-page"
}
</script>
<style scoped>
.container {
color: black;
}
</style>
SecondPage.vue
<template>
<div class="container">
Second Page
</div>
</template>
<script>
/* eslint-disable quotes */
export default {
name: "second-page"
}
</script>
<style scoped>
.container {
color: blue;
}
</style>
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: '<App/>'
})
IV. 修改HelloWorld.vue文件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<div class="nav-list">
<router-link class="nav-item" to="/">index</router-link>
<router-link class="nav-item" to="/FirstPage">页面一</router-link>
<router-link class="nav-item" to="/SecondPage">页面二</router-link>
</div>
<ul>
<li>12312313213</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</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>
V. 运行npm run dev
图9.gif
