vue.js在windows10系统下的环境搭建

Posted 2020-09-27 yiyiboy-原点

vue.js在windows10系统下的环境搭建流程

1、安装node.js（node包含了npm包管理器）

node.js安装包以及源码下载地址：https://nodejs.org/en/download/

注意：使用安装包（.msi）（作为小白的我，直接用了.exe，导致环境变量都不会自动配置，真的挺郁闷的）

下载下来以后可以直接双击安装，按照提示一步步安装。

详细的安装步骤可看网址：http://www.runoob.com/nodejs/nodejs-install-setup.html

到这里npm已经存在了，但是它涉及的资源可能有些是国外的，所以有时候会安装失败，所以我们使用国内的镜像cnpm

2、安装cnpm

详细资料网址：http://npm.taobao.org/

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org，耐心等待安装，安装完成以后可以使用cnpm代替npm

完成后的示意图

完成以后根据vue官网（https://cn.vuejs.org/v2/guide/installation.html）上的安装进行剩余步骤的安装以及工程的创建

3、安装vue-cli脚手架构建工具，帮助搭建所需的模板框架

全局安装vue-cli：npm install --global vue-cli

4、开始创建项目

在cmd窗口中，跳转到你要创建项目的路径，然后输入：vue init webpack my-project（一个基于webpack模板的项目，my-project是项目文件夹的名称）

命令运行过程中会碰到一些项需要你选择（如果你不想填一些信息，直接回车默认就好），我有如下选项：

完成以后，你可以在电脑上打开这个项目文件夹，在文件夹里面会有一个 package.json文件，里面会包含一些依赖的资源，我们需要把这些资源下载下来

到项目文件夹目录，在命令行中输入：npm install  （我安装了cnpm，所以用了cnpm install）

 

安装完成以后，可以在项目文件夹里面看到node_modules文件夹

5、运行项目（测试搭建是否成功）

在命令行中输入：cnpm run dev    注意：还是在当前项目文件夹下

得到结果：

 

到这里环境搭建完成了