Vue2.0使用vue-cli + webpack搭建项目

Vue2.0使用vue-cli + webpack搭建项目

说明：总结搭建vue2.0项目的步骤

一、安装环境

1、这个问题不需要多少，必备的node环境及npm

2、全局安装webpack

打开终端（或cmd）输入： npm install webpack -g ，等待安装完成再输入：webpack -v 查看版本号，如果出现版本号则说明安装成功

3、全局安装vue-cli脚手架

终端（或cmd）输入：npm install vue-cli -g, 安装完成后输入： vue -V, 如果出现相应版本号则说明安装成功

二、使用vue-cli构建项目

1、在桌面或磁盘任意盘符下新建一个文件夹，使用终端（或cmd）cd到新建的文件夹下

2、终端（或cmd）输入：vue init webpack 工程名字 在新建文件夹下安装vue-cli，这里需要注意工程的名字不要出现中文，其他可以随便起，输入完成后回车会出现如下的提示：

$ vue init webpack vue2.0 ----安装vue-cli

This will install Vue 2.x version of the template. ----提示创建vue项目说明

? Project name (vue2.0) ----项目名称，如果不输入直接回车则默认vue2.0

? Project name vue2.0

? Project description (A Vue.js project) ----项目描述，可写可不写

？Project description A Vue.js project

？Author Datura ----项目创建者，可写可不写

？Author Datura

？Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? (Y/n) Y ----是否安装Vue路由，我选择的是

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n ----是否启用eslint检测，我选择的是no

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n) Y

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n)

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vue2.0".

To get started: ----提示如何进入项目并启动项目

cd vue2.0 ----进入到项目根目录下

npm install ----安装项目依赖文件

npm run dev ----启动项目，默认端口是8080，如果电脑目前有其他的项目占用了8080端口，项目启动会报错，可以在项目中config > index.js中找到port：8080直接修改成其他端口就可以了

三、至此项目初始结构的搭建已完成，上一张项目运行起来的效果图