1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 搭建vue脚手架(vue-cli)--基于vue2.0版本

搭建vue脚手架(vue-cli)--基于vue2.0版本

时间:2018-10-29 14:18:46

相关推荐

搭建vue脚手架(vue-cli)--基于vue2.0版本

1.1 需要了解的内容

(1)HTML+CSS+JavaScript

(2)node.js环境(npm包管理工具)

(3)webpack打包工具

2.1 安裝Git Bash来实现Linux一样的命令行操作

(1)windows 的Git Bash 的安装方法(点击此处查看方法)

(2)安装后的结果展示:

(3)找到需要的安装目录:

$ cd Desktop/vue学习项目

3.1.1 安装node.js

(1)下载安装node(点击此处下载)

(2)安装完成后,在terminal中输入node -v,检测是否安装成功和node.js的版本

(3)在terminal中输入 npm -v,检测是否npm安装成功和npm 的版本

3.1.2 安装cnpm

为了更稳定和高效,会选择安装淘宝的npm镜像,也就是cnpm

在terminal中输入(点击此处查看淘宝官方cnpm网站):

$ npm install -g cnpm --registry=https://registry.

在terminal中输入:cnpm -v,可以检查cnpm的版本号和是否已经被按钮

4.1.1 安装Vue

(1)在terminal中输入npm install vue

$ npm install vue

(2)在terminal 中输入vue -V ,查看vue的版本号和是否已经安装完成

$ vue -V

4.1.2 安裝 vue-cli脚手架构建工具

(1)在terminal中输入npm install -g vue-cli

$ npm install -g vue-cli

4.1.3 创建一个基于webpack模板的新项目

(1)创建项目,首先选定项目,然后在命令行中把目录转到选定的目录,在terminal输入vue init webpack my-project

$ vue init webpack my-project

或者使用terminal输入vue init webpack-simple my-project

$ vue init webpack-simple my-project

配置项目:

需要注意的是项目的名称不能大写,不然会报错。

Project name (my-project) # 项目名称(我的项目)

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)

当然这些都看你自己个人的情况,我这里是全选了是。

EsLint在项目开发中比较重要,需要符合一定的规范

安装成功展示:

4.1.4 安装项目所需要的依赖

(1)刚初始化的项目是没有依赖的,如果运行会报类似这样的错误,

(2)首先定位到my-project文件内

$ cd my-project

(3)在这之前需要解决项目的依赖问题,使用下面的命令安装项目的依赖。

$ cnpm install

(2)如果出现如下图情况,说明依赖解决成功。

5.1 运行项目

在terminal中输入

$ cnpm run dev

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。