码迷,mamicode.com
首页 > Windows程序 > 详细

Vue环境搭建和项目初始化(windows)

时间:2017-06-29 11:23:20      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:node   iis   下载   nod   注意   官网   国外   style   用户权限   

1.    安装node.js

官网下载安装:https://nodejs.org/en/

版本查看:node -v 

注意:node版本最好新一点好,推荐6.0以上。

2.    npm安装webpack

a)     命令

npm install -g webpack //全局安装

npm install -g webpack-dev-server //安装调试工具

b)     Webpack安装权限问题

 技术分享

如果出现上图所示错误说明用户权限受限,使用管理员权限打开命令提示符(或node.js 命令提示符)

 技术分享

User用户身份打开node.js命令提示符窗口如下:

 技术分享

管理员身份打开node.js命令提示符窗口如下:

 技术分享

3.    npm安装vue-cli

c)     命令

npm install -g vue-cli //全局安装

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

注:Vue.js官方基于提供的开发模板介绍见《Vue开发模板简介

创建项目目录D:\\vue_project

在项目目录下执行下列命令

vue init webpack project-name //默认安装2.0版本

vue init webpack#1.0 project-name //安装1.0版本

 技术分享

5.    项目目录

 技术分享

6.    安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

7.    启动项目

npm run dev

8.    发布

npm run build

a)     vue-simple-webpack

执行发布命令后,会生成发布时的build.js,并且是经过压缩的。

b)     vue-webpack

执行发布命令后,会将所有的静态资源(包括index.html)都生成到dist目录下。也就是说你可以直接拿着dist目录去发布应用,例如在IIS下将dist目录发布为一个网站。

Vue环境搭建和项目初始化(windows)

标签:node   iis   下载   nod   注意   官网   国外   style   用户权限   

原文地址:http://www.cnblogs.com/zs-note/p/7093128.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!