一:准备工作

安装nodejs + 安装webpack + 配置环境变量 => 确保在dos界面的任何路径都都可直接使用命令

二:搭建项目

1.全局安装vue脚手架  [DOS界面]

 npm install vue-cli -g  

2.新建项目并启动服务  [进入项目所在目录]

   vue init webpack firstDemo  或 vue init webpack-simple firstDemo    =>  前者构建的应用丰富于后一个

 npm install       =>  生成node_modules

npm run dev     =>  启动服务(webpack内部搭建了一个服务器)

 此时整个目录的结构大概是:

    

3.编辑main.js [入口文件]

//main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './APP.vue'
import index from './components/index.vue'
import hello from './components/hello.vue' Vue.use(VueRouter); const routes=[ //定义路由
{path:'/' ,redirect:'/index'},
{path:'/index' ,component:index}
{path:'/hello',component:hello}
]
const router=new VueRouter({routes}); //创建VueRouter实例 const app=new Vue({ //创建和挂载实例
router,
render:h=>h(App)
}).$mount('#app') //与App.vue中根级元素的id一致

4.编辑App.vue文件

//App.vue

<template>
<div id='app'>
<img src='./assets/logo.png'>
<router-link to='/index'>首页</router-link>
<router-link to='/hello'>hello页</router-link>
<router-view></router-view> //路由匹配到的组件会渲染到这里
</div>
</template>

5.编辑hello.vue [index.vue与之类似]

//hello.vue

<template>
<p>我是hello页</p>
</template>

6.查看效果 [hello页面]

  

以下是vue-cli1.0和vue-cli2.0版本的写法区别

一:

1.0是通过router的map方法映射路由,并且map接收的是一个对象

2.0版本中map ()被替换了,通过实例化VueRouter并定义一个数组来映射路由。

二:

1.0通过router.start()来初始化路由

2.0中被替换成直接挂在到vue根实例上进行初始化。

三:

1.0中通过v-link来制定导航链接

2.0中可以直接使用router-link来导航

vue-cli2.0+webpack 项目搭建的更多相关文章

  1. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

  2. vue 3.0 vue-cli项目搭建要点

    一.使用vue-cli搭建项目(可使用vue ui图形化界面搭建项目,配置dist时,将名称设为项目名称) 二.项目搭建后 1.配置vue.config.js // 翻阅文档https://cli.v ...

  3. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  4. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  5. vue学习(1) vue-cli 项目搭建

    vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...

  6. (转)windows环境vue+webpack项目搭建

    首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...

  7. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

  8. Vue.js系列之项目搭建

    项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...

  9. Vue.js系列之项目搭建(1)

    项目搭建具体步骤如下: 1.安装node 到官网下载安装,我这里是win7系统. (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装 ...

随机推荐

  1. Photoshop基础照片美化

    自从有了“ps”以后,很多事情变成了可能,你可以出现在任何你想在的地方.而最基本的美化照片的功能,我想是很多同学学习PS的初衷.当你掌握了这门技术,很多人会对你刮目相看!今天小编就和大家分享一下ps的 ...

  2. Vue项目如何关闭Eslint检测

    找到build/webpack.base.config.js文件,修改如下 将图中第二个红色框的内容 "createLintingRule()" 清空,然后保存重新启动项目即可.

  3. gulp 压缩 uglify报错GulpUglifyError: unable to minify JavaScript

    引:https://www.cnblogs.com/vellemo/p/6898125.html 在压缩的时候报错:GulpUglifyError: unable to minify JavaScri ...

  4. Permission denied: user=root, access=WRITE, inode="/":hdfs:supergroup:drwxr-xr-x

    通过手动安装CDH没权限 [root@slave1 ~]# groupadd supergroup[root@slave1 ~]# hadoop fs -mkdir /tao3^C[root@slav ...

  5. 【转】Windows(server2008)下使用VisualSVN Server搭建SVN服务器

    参考文献 1.Windows下使用VisualSVN Server搭建SVN服务器(百度经验)  挺好就是没有配图已验证可用 2.在Windows Server 2008上部署SVN代码管理器 把第二 ...

  6. shell 脚本 功能性语句 read,expr,test

    1. read 从终端输入数据赋值给变量 read val 把读入的数据存放到val中 #!/bin/bash echo -n "please input two number :" ...

  7. rem换算公式

    当前rem基准值=预设的基准值/设计稿宽度*当前设备的宽度

  8. python的update方法

    b = {"c":0, "position":{}} b["position"]["IF"] = {} print(b) ...

  9. layui实现已知被选中的option,怎样渲染

    在项目中用到layui实现第几个option 实现,在select中渲染出需要展示的option 代码: $("#period option[value="+res.data.se ...

  10. NOIP2016 解题报告

    D1T1 玩具谜题 xjb模拟即可 #include<bits/stdc++.h> #define N (100000+5) using namespace std; inline int ...