一、环境搭建
1.安装node.js,安装完成后打开命令行工具(win+r输入cmd,)输入 node -v,如下图,如果出现相应的版本号,则说明安装成功,npm版本至少在3.x.x以上。

2,安装webpack,打开命令行工具输入:npm install webpack -g。安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。

3,安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

二、使用vue-cli构建项目
-
创建一个总文件夹放项目。如果已经安装了git,在刚建文件夹下右键选择Git Bash Here直接打开;或者在命令行工具中使用“cd 目录名称”找到该文件夹。
-
vue脚手架搭建。输入:vue init webpack project;(“project” 项目名称,不能使用中文)。
$ vue init webpack project --------------------- 安装vue脚手架的命令
? Project name (project) ---------------------项目名称
? Project name project
? Project description (a Vue.js project) ---------------------项目描述
? Project description a Vue.js project
? Author Wjessie --------------------- 项目创建者
? Author Wjessie
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由
? Install vue-router? no
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 说明如何启动这个服务
cd exprice
npm install
npm run dev
如下图:

- 进入创建的项目目录:cd project(项目名称);
项目目录如下:

-
安装项目依赖:npm install;会有点慢,耐心等候哦!安装完目录会多一个node_modules文件夹。
简单介绍各个文件:

-
启动项目,输入:npm run dev。服务启动成功后在浏览器中输入:localhost:8080会出现一个欢迎页面, 默认8080端口,确认自己的8080端口未被使用。
至此,vue脚手架搭建完成。
网友评论