windows下搭建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/

 

posted @ 2021-08-16 14:18  雷雨客  阅读(376)  评论(0编辑  收藏  举报