安装node js到构建一个vue

1、安装node js

  下载地址:http://nodejs.cn/download/
2、安装完成后运行Node.js command promptnode -v查看安装版本)

  
3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本)

  
4、注册cnpm来代替npm
  使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org

  如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"

5、安装vue脚手架vue-cli
  命令:cnpm install -g vue-cli

  安装成功后可以用 vue -V 查看vue版本
6、cd到对应的目录下初始化vue项目
  命令:vue init webpack my-project
      Project name 项目名 
      Project description 项目名描述 
      Author 作者邮箱 
      Use ESLint to lint your code? 是否需要ESlist语法检查 
      Setup unit tests with Karma + Mocha? 是否需要单元测试 
      Setup e2e tests with Nightwatch? Yes是否需要e2e测试 
7、package.json为项目依赖资源,如果要运行这个项目需要使用cnpm install 安装依赖项(直接在项目文件夹路径下执行)
8、使用命令cnpm run dev启动项目,浏览器会打开 http://localhost:8080/#/ 看到以下效果

      

  开发时属于热部署状态,代码保存后浏览器会自动刷新,错误提示也非常友好。

 

9、编译打包 cnpm run build

  会编译打包到项目dist文件夹下,然后我们就可以部署到服务器上(注意:如果你直接打开index.html,可能页面会是一片空白,这是由于你引用的js路径有问题)

     

10、使用jQuery包

  http://www.cnblogs.com/pandabunny/p/5417938.html

1、安装node.js

在node.js官网下载相应的版本,安装(一直next)

node.js官网:https://nodejs.org/zh-cn/ 

2、查看npm版本(版本低于3.0需要升级)

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

 

3、安装淘宝npm镜像cnpm(npm安装速度很慢,使用淘宝的镜像速度很快)

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

4、安装vue(安装需要的包,json数据等,我也不懂吐舌头

# 最新稳定版
$ cnpm install vue

5、搭建大型单页应用

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目(my-projrct为项目名,任意修改)
$ vue init webpack my-project

6、进入项目,安装并运行

$ cd my-project(切换至项目目录)
$ cnpm install(安装依赖所需要的包)
$ cnpm run dev(启动运行项目)

7、访问http://localhost:8080/,

输入“cd..”敲回车会退回到上一级目录。

输入“cd\”敲回车会直接退回到C盘根目录

在CMD程序里输入“d:”敲回车可以进入D盘。

进入D盘后输入“cd\src”就可以进入src文件夹。

使用“cd..”敲回车就可以退出src文件夹。

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值