windows下搭建Vue开发环境

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　一、安装node.js

　　1、根据地址，下载免安装版本，并解压如下

https://nodejs.org/en/download/

　　2、配置变量，先将路径修改为：D:\workset\feset\nodejs

　　1）在D:\workset\feset\nodejs下新建文件夹node_cache和node_global

　　2）新建系统变量，并将其添加到PATH下

　　　　a）NODE_PATH：D:\workset\feset\nodejs（任意目录下可使用npm、node等命令）

　　　　b）NODE_GLOBAL：D:\workset\feset\nodejs\node_global（任意目录下可使用cnpm、vue等命令）

　　3）打开cmd终端，输入node -v 和 npm -v 测试变量是否配置成功

　　4）设置缓存路径和全局模块存放路径

npm config set cache "D:\workset\feset\nodejs\node_cache"
npm config set prefix "D:\workset\feset\nodejs\node_global"

　　3、安装淘宝镜像cnpm

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

　　二、安装vue及命令行工具vue-cli脚手架

cnpm install vue -g

cnpm install vue-cli -g

　　三、创建项目

　　1、cmd终端进入D:\workset\feset\vue，执行初始化命令，webpack、webpack-simple都是常用模板，根据需要选择

vue init webpack vueDemo

　　2、根据提示选择需要的安装项

Project name vuedemo（输入项目名）
Project description A Vue.js project（输入项目描述）
Author sl（输入作者）
Vue build runtime
Install vue-router? No（是否安装路由）
Use ESLint to lint your code? Yes（是否安装ESLint）
Pick an ESLint preset none
Set up unit tests No（是否安装unit test）
Setup e2e tests with Nightwatch? No（是否安装e2e test）
Should we run `npm install` for you after the project has been created? (recommended) no（是否自动npm install创建项目）

　　3、开始安装并运行

D:\workset\feset\vue>cd vueDemo
D:\workset\feset\vue\vueDemo>npm install
D:\workset\feset\vue\vueDemo>npm run dev

　　4、访问测试，浏览器输入http://localhost:8080/

以上是 windows下搭建Vue开发环境 的全部内容， 来源链接： utcz.com/z/378209.html

回到顶部