vue2.0.js开发环境搭建

admin 发布于 VUE

大家好,今天下午对于vue项目环境的搭建进行了研究,一直以来,我都是用cdn的方式将vue.js引入Html界面,然后就开始刷vue的官方文档了。在刷过文档之后,我就想着,真实的项目是怎么样子的呢,然后就开始了vue-cli脚手架的搭建和使用,下面是我搭建环境的步骤以及我自己初步使用vue-router实现的一个简单的不能再简单的例子。注意,文中的例子适合对vue已经有一定的了解,对vue组件化概念并且对es6有了解的朋友们。

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

在cmd里直接输入: 

npm install -g cnpm --registry=https://registry.npm.taobao.org, 

回车,等待安装... 

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 

在cmd里 

     1) :按照vue-cli

输入:cnpm install -g vue-cli,回车,等待安装... 

     2). 确定是否安装成功

输入:vue,回车,若出现vue信息说明表示成功

4.创建项目

在cmd里输入: 

vue init webpack vue_test(项目文件夹名) 

回车,等待一小会儿,依次出现‘git’下的项,可按下图操作

5.安装依赖

在cmd里 

     1).输入: 切换到项目目录

cd vue_test(项目名),回车,进入到具体项目文件夹

     2).输入: 安装依赖

cnpm install,回车,等待一小会儿

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的

6.测试环境是否搭建成功

(1):在cmd里输入: 运行环境

cnpm run dev

(2):在浏览里输入: 

localhost:8080(默认端口为8080)


1068浏览量 · 0评论 · 2018-10-27 06:42:25

全部评论  0

注册登录 进行评论

热门专题

更多专题