博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
零基础 Vue 开发环境搭建 打开运行Vue项目
阅读量:7120 次
发布时间:2019-06-28

本文共 1300 字,大约阅读时间需要 4 分钟。

【相关推荐】

  所需文件

  node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0)

  cnpm npm的淘宝镜像

  vue-cli 构建工具(脚手架)

一、安装node

  安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

1、启动CMD依次执行以下两条命令

  npm config set prefix "F:\set-soft\nodejs\node_global"
  npm config set cache "F:\set-soft\nodejs\node_cache"

  后续用命令npm install -g XXX安装,模块就在D:\nodejs\node_global\node_modules里。

2、设置环境变量:

  (1)修改用户变量PATH:"D:\nodejs\node_global"加到后面。
  (2)新增系统变量NODE_PATH:设置成“D:\nodejs\node_global\node_modules”。

  NODE_PATH = F:\set-soft\Node\nodejs

  PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

  这样就可以把后面全局安装的装到global里并且可以直接用命令使用。

二、安装vue

  1.安装cnpm

    说明:由于许多npm包都在国外,用淘宝的镜像服务器,对依赖的module进行安装。
    参考网址为:
    安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

  2.用cnpm安装vue

    安装命令为:cnpm install vue -g
  3.安装vue命令行工具
    安装命令为:cnpm install vue-cli -g
三、项目开发

  (1)创建工程

    1. cd命令进入将要新建工程的目录,如“E:\nodejs”
    2. 用命令"vue init webpack mytest"创建一个基于 webpack 模板的新项目,工程名为"mytest"。
  (2)安装工程依赖 (打开别人项目第一步,)
    1. cd命令进入工程目录
    2. 用命令"cnpm install”安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
  (3)运行项目
    1. cd命令进入工程目录
    2. 用命令“cnpm run dev”运行项目。
  (4)打包项目
     cnpm run build

 

  参考文献

转载地址:http://piiel.baihongyu.com/

你可能感兴趣的文章
iOS下JS与OC互相调用(四)--JavaScriptCore
查看>>
4. 怎么在生活中提升专注力?
查看>>
http请求/相应及如何在chrome中查看
查看>>
Docker最佳实践:构建最小镜像
查看>>
短视频直播&一对一源码“皇冠”花落谁家
查看>>
MySQL用户的增删改权以及root远程连接
查看>>
img元素srcset属性浅析
查看>>
Laravel 深入核心系列教程
查看>>
前端基础篇之HTTP协议
查看>>
安卓自定义注解支持和示例实现
查看>>
Go语言详细介绍:logo和版本
查看>>
搜索框,输入关键字过滤对象数组
查看>>
Dart语言——45分钟快速入门(下)
查看>>
iOS safari浏览器上overflow: scroll元素无法滚动bug深究
查看>>
extract-text-webpack-plugin
查看>>
Sequelize Unknown column 'createdAt' in 'field list'?
查看>>
面试题
查看>>
大快HanLP自然语言处理技术介绍
查看>>
centos7 svn自动更新至web目录
查看>>
小米9.0系统最简单激活xposed框架的教程
查看>>