使用vue-cli+webpack搭建项目

来源

分享：http://www.jianshu.com/u/5bf340f084bd  一岑不冉 

作者：一岑不冉

链接：http://www.jianshu.com/p/c84eca5a2059

來源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前言

vue-cli作为一款mvvm框架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。在开始项目之前，建议先熟悉vue.js基本语法。

安装Node环境

1.安装node.js

在node.js官网下载稳定版本

下载node.js

下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。

检验是否安装成功，在cmd输入命令 node -v,回车 及 npm -v,回车，如出现下图所示版本信息，表示安装成功

2.安装vue-cli

打开cmd命令行工具，输入npm install -g vue-cli,回车 全局安装vue-cli

(注：npm会有点慢，建议更改为国内淘宝的镜像，只换源即可。在cmd输入命令：npm config set registry https://registry.npm.taobao.org)

构建vue-cli项目

1.创建项目

打开cmd，进入想要创建项目的目录下，输入：vue init webpack projectname

webpack默认是安装2.0版本，若要安装1.0版本，需在webpack后面加上版本号信息，

vue init webpack#1.0 project-name(安装1.0版本)

projextname是自定义的项目名称，例：我这里命名为vuedemo

创建vue-cli项目（1）

命令输入完成后敲回车，此时会自动下载template模板，稍微等待一会，会让你按提示完成项目的创建，如下图

创建vue-cli项目（2）

Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式，一般默认选择第一种

Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装

2.安装依赖

项目创建完成，打开文件夹可以看到目录结构如下

未安装依赖时项目结构

此时，项目已经初具雏形，但还未安装依赖，需打开cmd，进入项目所在根目录下，输入npm install,回车

依赖安装中

依赖安装结束

我们此时再打开项目文件夹，可以看到多了node_modules文件夹，里面是各种需要的依赖包

安装依赖后项目结构

3.运行项目

打开cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目

运行项目（1）

完成后，浏览器会自动打开，监听端口8080

运行项目（2）

可以在浏览器看到如下画面，恭喜你，已成功构建vue-cli项目，接下来就可以开始开发啦

扩充：

从上创建项目到demo有详细的讲解，适合新手入门

1.如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件，例如：

import './assets/css/public.css'

这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。

2.因为我们要用到接口请求，所以第一步先安装vue-resource,打开cmd进入文件所在目录，输入npm install vue-resource,安装完成后在入口文件main.js中引入

import VueResource from 'vue-resource'

Vue.use(VueResource)

---

知识点：转自：  www.jianshu.com/p/732b52f7e329  

1.router-link

标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（我们等会得配置路径为'/'和'/manage'的路由）

router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为

(1):

2.this.$router.push

如果不想用标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法

3.this.$route.params

this.$route指向vue实例的路由对象，params是路由传过来的参数集合