vue项目搭建+路由使用

vue脚手架搭建步骤：

1. 全局安装 vue-cli
2. npm install -g vue-cli

3. 创建一个基于 webpack 模板的新项目

4. vue init webpack // 当前目录
5. vue init webpack my-project // 新建目录
6. 安装依赖，走你
7. cd my-project
8. npm install
9. npm run dev

路由使用：

重要文件（package.json、main.js、router\index.js、components\*、App.vue）

package.json配置如下：

 1 {
 2 "name": "vuewebpack",
 3 "version": "1.0.0",
 4 "description": "A Vue.js project",
 5 "author": "",
 6 "private": true,
 7 "scripts": {
 8 "dev": "node build/dev-server.js",
 9 "start": "node build/dev-server.js",
10 "build": "node build/build.js"
11 },
12 "dependencies": {
13 "vue": "^2.3.3",
14 "vue-router": "^2.3.1"
15 },
16 "devDependencies": {
17 "autoprefixer": "^6.7.2",
18 "babel-core": "^6.22.1",
19 "babel-loader": "^6.2.10",
20 "babel-plugin-transform-runtime": "^6.22.0",
21 "babel-preset-env": "^1.3.2",
22 "babel-preset-stage-2": "^6.22.0",
23 "babel-register": "^6.22.0",
24 "chalk": "^1.1.3",
25 "connect-history-api-fallback": "^1.3.0",
26 "copy-webpack-plugin": "^4.0.1",
27 "css-loader": "^0.28.0",
28 "eventsource-polyfill": "^0.9.6",
29 "express": "^4.14.1",
30 "extract-text-webpack-plugin": "^2.0.0",
31 "file-loader": "^0.11.1",
32 "friendly-errors-webpack-plugin": "^1.1.3",
33 "html-webpack-plugin": "^2.28.0",
34 "http-proxy-middleware": "^0.17.3",
35 "webpack-bundle-analyzer": "^2.2.1",
36 "semver": "^5.3.0",
37 "shelljs": "^0.7.6",
38 "opn": "^4.0.2",
39 "optimize-css-assets-webpack-plugin": "^1.3.0",
40 "ora": "^1.2.0",
41 "rimraf": "^2.6.0",
42 "url-loader": "^0.5.8",
43 "vue-loader": "^12.1.0",
44 "vue-style-loader": "^3.0.1",
45 "vue-template-compiler": "^2.3.3",
46 "webpack": "^2.6.1",
47 "webpack-dev-middleware": "^1.10.0",
48 "webpack-hot-middleware": "^2.18.0",
49 "webpack-merge": "^4.1.0"
50 },
51 "engines": {
52 "node": ">= 4.0.0",
53 "npm": ">= 3.0.0"
54 },
55 "browserslist": [
56 "> 1%",
57 "last 2 versions",
58 "not ie <= 8"
59 ]
60 }

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'

Vue.config.productionTip = false

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

router\index.js配置如下：

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import Hello from '@/components/Hello'
 4 import About from '@/components/About'
 5 
 6 // 安装路由
 7 Vue.use(Router)
 8 
 9 export default new Router({
10 routes: [
11 　　{
12 　　　　path: '/',
13 　　　　name: 'Hello',
14 　　　　component: Hello
15 　　}, {
16 　　　　path: '/about',
17 　　　　name: 'About',
18 　　　　component: About
19 　　　　}
20　　 ]
21 })

components\*包含以下文档，分别配置：

Hello.vue：

  1 <template>
  2 　　<div class="hello">
  3 　　<h1>{{ msg }}</h1>
  4　　 <h2>Essential Links</h2>
  5 <ul>
  6 　　<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
  7　　 <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
  8 　　<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
  9 　　<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
 10 <br>
 11 　　<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
 12 </ul>
 13 <h2>Ecosystem</h2>
 14 <ul>
 15 　　<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
 16 　　<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
 17 　　<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
 18 　　<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
 19 </ul>
 20 
 21 <h2>关于我们</h2>
 22 <ul>
 23 　　<li><a href="#/about">进入详情</a></li>
 24 </ul>
 25 </div>
 26 </template>
 27 
 28 <script>
 29 export default {
 30 　　name: 'hello',
 31 　　data () {
 32 　　　　return {
 33　　　　　　 msg: 'Welcome to Your Vue.js App'
 34 　　　　}
 35 　　}
 36 }
 37 </script>
 38 
 39 <!-- Add "scoped" attribute to limit CSS to this component only -->
 40 <style scoped>
 41 h1, h2 {
 42 　　font-weight: normal;
 43 }
 44 
 45 ul {
 46 　　list-style-type: none;
 47 　　padding: 0;
 48 }
 49 
 50 li {
 51 　　display: inline-block;
 52 　　margin: 0 10px;
 53 }
 54 
 55 a {
 56 　　color: #42b983;
 57 }
 58 </style>
 59 
 60  
 61 
 62 About.vue：
 63 
 64 <template>
 65 <div class="hello">
 66 　　<h1>{{ msg }}</h1>
 67 　　<h2>你想知道啥？</h2>
 68 　　<h2><a href="#/">返回首页</a></h2>
 69 </div>
 70 </template>
 71 
 72 <script>
 73 export default {
 74 　　name: 'hello',
 75 　　data () {
 76　　　　 return {
 77　　　　　　 msg: '关于我们'
 78 　　　　}
 79 　　}
 80 }
 81 </script>
 82 
 83 <!-- Add "scoped" attribute to limit CSS to this component only -->
 84 <style scoped>
 85 h1, h2 {
 86 　　font-weight: normal;
 87 }
 88 
 89 ul {
 90 　　list-style-type: none;
 91 　　padding: 0;
 92 }
 93 
 94 li {
 95 　　display: inline-block;
 96 　　margin: 0 10px;
 97 }
 98 
 99 a {
100 　　color: #42b983;
101 }
102 </style>
103 
104 App.vue配置如下：
105 
106 <template>
107 <div id="app">
108 　　<img src="./assets/logo.png">
109　　 <router-view></router-view>
110 </div>
111 </template>
112 
113 <script>
114 export default {
115 　　name: 'app'
116 }
117 </script>
118 
119 <style>
120 #app {
121 　　font-family: 'Avenir', Helvetica, Arial, sans-serif;
122 　　-webkit-font-smoothing: antialiased;
123 　　-moz-osx-font-smoothing: grayscale;
124 　　text-align: center;
125 　　color: #2c3e50;
126 　　margin-top: 60px;
127 }
128 </style>

整个配置下来，可以实现主页面显示，并且可以有主页面Hello，跳转到About页面。由于也是才弄懂，原理性的东西也不写了，这样做就可以实现想要的路由跳转了！再研究吧！

posted on 2017-08-03 16:17 佑之以航阅读(3178) 评论(0) 编辑收藏举报