Windows使用vue-cli搭建项目教程

Windows使用vue-cli搭建项目教程

一、环境介绍

1、Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言。
2、npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 https://npm.taobao.org

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

3、webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
4、vue-cli: 用户生成Vue工程模板。

二，环境搭建

安装 node.js
1、 首先需要安装node环境，可以直接到node官网下载安装包安装：node中文网、node英文网，更多配置详情可点此参考。安装完成后检测PATH环境变量是否配置了Node.js，快捷键win+R 输入cmd => 输入命令path输出如下结果

我们可以看到环境变量中已经包含了D:\Program Files\nodejs\然后继续分别输入node -v 和 npm -v 等待一会，显示出node和npm的版本号，就说明安装成功。如果 cmd 中运行npm –v光标闪烁长时间未出现版本号，npm命令完全无反应，不是加载的那种状态。请删除C:\Users{账户}\下的.npmrc文件。注意： 不是nodejs安装目录npm模块下的那个.npmrc文件。

2、 nodejs prefix（全局）和 cache（缓存）windows下设置：

• 2-1、 说明： 在安装完nodejs后，通过npm下载全局模块默认安装到C:\Users\username\AppData\Roaming\npm下，这当然是不太对的默认。
  打开下载好的Windows安装包(.msi)安装，nodejs安装路径会自动添加到PATH环境变量；本文安装路径为：D:\Program Files\nodejs

• 2.2、 在nodejs安装路径下新建文件夹node_cache用来存放下载包的缓存；即：D:\Program Files\nodejs\node_cache，修改完成之后如下图
  

• o2.3、 在cmd中运行 npm config set cache “D:\Program Files\nodejs\node_cache” 设置缓存文件夹；在cmd中运行 npm config set prefix “D:\Program Files\nodejs” 设置全局模块存放路径；
  注意： nodejs会自动寻找该路径下的node_modules文件夹为实际存放全局模块的路径，这也是为啥prefix不设置global的原因；以后安装的全局模块都会被放到D:\Program Files\nodejs\node_modules下，跟npm模块在一个文件夹中；

• o2.4、 修改D:\Program Files\nodejs\node_modules\npm\npmrc文件，将默认值改为：prefix=D:\Program Files\nodejs，如果不做这个修改，则npm在运行 npm ls -g 的时候，仍然以默认的路径来查找已安装的全局模块；

• o2.5、cmd中运行npm install express -g 以全局方式安装express模块，可发现，在D:\Program Files\nodejs\node_modules下出现express文件夹；如下图：

• 2.6、cmd中运行npm list -g,列出所有全局模块。包含了express和npm两个模块，及其依赖模块；最后有洁癖的同学可以将用户环境变量中的默认路径;C:\Users\Administrator\AppData\Roaming\npm删除；
  环境变量名NODE_PATH值D:\Program Files\nodejs\node_global\node_modules如果有也可删除；本文包含的方法，并不需要另外设置PATH变量；

安装vue-cli

• 1安装好了node，我们可以直接全局安装vue-cli：cmd中运行npm install -g vue-cli但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置cnpm：在cmd中输入

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

然后等待，安装完成如下图：
如果安装失败，可以使用命令 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存。完成后同样可以使用 cnpm -v 查看是否安装成功，有些会出现版本号，有些会出现一堆东西，具体看具体情况，只要不报错就OK。

• 2、 然后使用 cnpm 安装 vue-cli 和 webpack，输入命令cnpm i -g @vue/cli 等待安装完成。最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack，安装完成后，可以输入 vue -V（注意 V 大写）查看是否安装成功，成功显示版本号。如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

三、使用vue cli3创建项目

1. 打开vscode,打开存放项目的文件夹

2.在下面新建终端

3.执行创建项目命令 ,这里的projectname为项目名称,不能有大写字母

vue create projectname

4.选择项目需要用到的功能按键盘↑ ↓键进行选择,按空格键选择其中某一个

本文选择如下几项功能:

• Babel
• Router
• Vuex
• Css Pre-processors
• Lint/Formatte

5. 是否使用history路由

本文暂未使用,如需使用可参考Routing with history.pushState

6.选择css处理器

7.代码6.选择css处理器

风格和eslint
根据个人习惯选择即可

8.选择在保存时还是在提交时修改

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

6.最后，小编发现创建vue项目速度实在太慢了所以，打开命令行执行 cnpm install --save-dev webpack
7喜欢这篇文章，请关注小编公众号：