20171102vue.js2.0:搭建开发环境及构建项目
2017-11-02 14:49
941 查看
vue.js2.0:搭建开发环境及构建项目
(2)验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本。
(3)npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。
输入npm -v可得到npm的版本。
注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。
npm -g install npm
npm 国内镜像 https://npm.taobao.org/
在命令行中输入以下内容等待安装
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g vue-cli
在这里我将vue项目建在f盘的vueProjiects文件夹下,利用命令进入此目录。在cmd中输入盘符f:回车即可进入F盘:
输入命令 cd vueProjects跳到此目录下:
在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:
vue init webpack my-vue-project
vue initwebpack my-vue-project意思是初始化一个项目,利用的是webpack打包和压缩,此项目命名为my-vue-project。这样,my-vue-project文件夹就自动生成刚刚在指定的目录中,在此过程中,需要输入项目名、描述、作者等。
打开myVueProject文件夹,项目文件如下:
cdmyVueProject
cnpminstall
可以看到myVueProject文件夹下多了一个node_modules文件
npm run dev
项目运行成功后浏览器会自动打开localhost:8080呈现以下页面:
至此,vue的脚手架工具已经搭建完成,接下来具体项目的开发只需在src目录下进行。
1. 安装node.js
(1)在官网Node.js官网:https://nodejs.org/en/选择下载并安装Node.js。安装过程只需要点击“下一步”即可。(2)验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本。
(3)npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。
输入npm -v可得到npm的版本。
注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。
npm -g install npm
2. 安装cnpm
由于资源的限制,安装npm依赖包的时候经常失败,建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。npm 国内镜像 https://npm.taobao.org/
在命令行中输入以下内容等待安装
npm install -g cnpm –registry=https://registry.npm.taobao.org
3. cpnm全局安装vue-cli
在命令行中运行以下命令然后等待安装cnpm install -g vue-cli
4. 构建项目
(1)新建项目在这里我将vue项目建在f盘的vueProjiects文件夹下,利用命令进入此目录。在cmd中输入盘符f:回车即可进入F盘:
输入命令 cd vueProjects跳到此目录下:
在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:
vue init webpack my-vue-project
vue initwebpack my-vue-project意思是初始化一个项目,利用的是webpack打包和压缩,此项目命名为my-vue-project。这样,my-vue-project文件夹就自动生成刚刚在指定的目录中,在此过程中,需要输入项目名、描述、作者等。
打开myVueProject文件夹,项目文件如下:
5. 安装项目依赖
在cmd中,注意需要使用命令先定位到my-vue-project目录下,然后输入命令cnpm install安装项目所需的依赖包资源cdmyVueProject
cnpminstall
可以看到myVueProject文件夹下多了一个node_modules文件
6. 运行项目
使用命令npm run dev 运行项目npm run dev
项目运行成功后浏览器会自动打开localhost:8080呈现以下页面:
至此,vue的脚手架工具已经搭建完成,接下来具体项目的开发只需在src目录下进行。
相关文章推荐
- vue.js2.0实战:搭建开发环境及构建项目
- VUE2.0的简单入门(一)-安装node.js环境搭建与项目构建
- Vue.js 2.0和Cordova开发webApp环境搭建
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- Vue.js 2.0和Cordova开发webApp环境搭建方法
- Vue.js开发环境搭建-新建项目
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- Vue.js 2.0 入门教程(一) 搭建开发环境
- Vue.js 2.0和Cordova开发webApp环境搭建
- 搭建vue.js开发环境过程
- vue.js开发环境搭建
- vue.js开发环境搭建及热更新
- Vue.js 2.0环境搭建(mac机系统环境)
- 快速构建C++项目工具Scons,结合Editplus搭建开发环境
- Vue.js 2.0环境搭建(mac机系统环境)
- 详解vue.js 开发环境搭建最简单攻略
- Vue.js开发环境快速搭建教程
- vue.js开发环境搭建以及脚手架工具安装
- Vue.js小白入门,搭建开发环境
- Vue.js开发环境搭建的介绍