1、vue vue2.0 vue-cli vue-router webpack

因为网速还可以,所以我就是用了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 就可以看到设置的内容啦

今天就先介绍到这里啦!
后续有更新哦!
精彩内容请看后续文档!

    原文作者:王小匠
    原文地址: https://segmentfault.com/a/1190000008720790
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞