第一步: node.js官网下载安装, 安装目录别装C盘就行: https://nodejs.org/en/download/

win10 + vs code + vue 环境搭建

win10 + vs code + vue 环境搭建

第二步:在nodejs安装路径下,新建node_global和node_cache两个文件夹

win10 + vs code + vue 环境搭建

设置缓存文件夹:

npm config set cache "F:\node.js\install\node_cache"

设置全局存放路径:


npm config set  prefix "F:\node.js\install\node_global"

 

然后在C:\Users\[你的用户名]下用记事本打开.npmrc文件确定如下图所示就说明设置成功了。

win10 + vs code + vue 环境搭建

三、基于 Node.js 安装cnpm(淘宝镜像)

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

 安装后 用  cnpm  -v  查看安装是否成功:

win10 + vs code + vue 环境搭建

四:设置环境变量:

 1:用户环境变量:

win10 + vs code + vue 环境搭建

2:系统环境变量

win10 + vs code + vue 环境搭建

 

第五步:安装webpack (js 应用程序的静态模块打包器(module bundler))

当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph), 其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 

Vue的组件是.vue或者 .wxml等文件, 无法被浏览器解析, 需要被翻译和打包为.js文件,  输入:  cnpm install webpack -g 

完成后在F:\node.js\install\node_global\node_modules目录下可看到webpack文件夹和它的文件了

win10 + vs code + vue 环境搭建

 

第六步、安装vue命令行工具,即vue-cli 脚手架

cnpm install vue-cli -g

 

win10 + vs code + vue 环境搭建

安装完成后node_global可看到vue的六个文件。

win10 + vs code + vue 环境搭建

 

七: 命令创建vue项目, cmd下 进入存放项目的路径: 输入: vue  init webspack   你项目名称

      重要的一点是     最后要选择  No,  I  will  handle that myself  也就是创建完项目后由我自己来下载依赖

win10 + vs code + vue 环境搭建

创建完毕后在目录下就出现了 新建的项目:

win10 + vs code + vue 环境搭建

win10 + vs code + vue 环境搭建

目录说明:

win10 + vs code + vue 环境搭建

 

安装依赖:  cd   vue-demo   输入 cnpm install

下载安装项目的依赖(注意不是用的npm,而是cnpm,这样快些),完成后可在目录中看到所有有依赖,如下图

win10 + vs code + vue 环境搭建

 

输入cnpm run dev(注意不是用的npm,而是cnpm)后会给出提示让我们在浏览器通过http://localhost:8080地址访问。

win10 + vs code + vue 环境搭建

 

win10 + vs code + vue 环境搭建

 

 

安装 vs  code  ,官网:https://code.visualstudio.com/Download

安装过程下一步下一步别装C盘就行。

其他优化和插件的安装就另外百度就ok了。 

 

vs code 选择打开文件夹,找到创建的项目就能导入项目了。

win10 + vs code + vue 环境搭建

 

在菜单   查看 > 调试控制台  > 输入命令    npm run dev  

win10 + vs code + vue 环境搭建

win10 + vs code + vue 环境搭建

 

然后 localhost:8080就可以访问了 

参考:

https://blog.csdn.net/junshangshui/article/details/80376489

https://www.cnblogs.com/zhaomeizi/p/8483597.html

 

 

相关文章:

  • 2021-06-14
  • 2021-06-27
  • 2021-12-01
  • 2021-11-24
  • 2022-02-08
  • 2021-12-31
  • 2021-12-11
  • 2022-12-23
猜你喜欢
  • 2021-11-13
  • 2022-12-23
  • 2021-12-04
  • 2021-09-11
  • 2022-01-07
  • 2021-07-08
  • 2022-12-23
相关资源
相似解决方案