因为网速还可以,所以我就是用了npm下载,可以使用淘宝镜像,把 npm 的地方换成 cnpm 就可以啦!没有安装淘宝镜像的童鞋可以搜搜。。
注:各版本内容(node 7.5.0,npm 4.1.2 ,vue 2.8.1)
查看vue版本vue -V,记得要大写
项目实际安装版本(vue:2.2.2,vue-router:2.3.0,less:2.7.2)
1、npm init webpack sousou
注:(1)sousou是项目名
(2)创建json数据时不使用router、ESlint、test内容
2、cd sousou
注:进入到创建好的sousou文件夹
3、npm install
注:下载packjson.json里面设置插件依赖!
4、npm run dev
注:项目跑起来啦!
补充说明(main .js):
版本一:
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue ({
// vue 1.x 写法
el: '#app',
template: '<App/>',
components: { App }
})
版本二:
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue ({
// vue 2.x 写法
el: '#app',
render: x => x(App)
})
大家可以更改过后再运行npm run dev,项目一样可以跑起来哦!
重点在后面
5、因先前没有下载vue-router
现在下载使用命令 :
npm install vue-router less –save-dev
注:因为要使用less预处理器,所以就和vue-router一起下载啦
6、在 src文件夹 下面新建一个 router文件夹,并在其里面新建一个router.js文件
vue-router相关设置可以查看官方中文 文档 https://router.vuejs.org/zh-c…
英文好的童鞋可以查看英文文档。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const First = {template: '<div>first的内容</div>'}
const Second = {template: '<div>second的内容</div>'}
const Home = {template: '<div>home的内容</div>'}
const router = new VueRouter({
mode: 'history',
base: __dirname,
// 记得是routes,不是router,要不然显示不了导航相关页面内容
routes: [
{path: '/', component: Home},
{path: '/first', component: First},
{path: '/second', component: Second}
]
})
new Vue({
router,
template: `
<div id = 'new'>
<h1> 导航 </h1>
<ul>
<li><router-link to='/'> 首页 </router-link></li>
<li><router-link to='/first'> 第一 </router-link></li>
<li><router-link to='/second'> 第二 </router-link></li>
</ul>
<router-view></router-view>
</div>
`
}).$mount('#app')
7、main.js只输入,因为main.js是入口文件
import Vue from 'vue'
import Router from './router'
8、npm run dev 就可以看到设置的内容啦
今天就先介绍到这里啦!
后续有更新哦!
精彩内容请看后续文档!