9.0、vue-cli环境配置超详细教程

9.0、vue-cli环境配置超详细教程

第一步:进入http://nodejs.cn/download/ 官网下载

9.0、vue-cli环境配置超详细教程

 

第二步:安装,无脑点击下一步即可,安装的位置可以自行选择

9.0、vue-cli环境配置超详细教程

 9.0、vue-cli环境配置超详细教程

 

第三步:以管理员身份打开命令提示符窗口,输入以下代码查看版本、以及是否安装成功

node -v

npm -v

9.0、vue-cli环境配置超详细教程

 

第四步:安装Node.js淘宝镜像加速器(cnpm)

这样子的话,下载会快很多!

# -g就是全局安装
npm install cnpm -g

#或使用如下语句解决npm速度慢的问题,但是每次安装的时候都要加这段代码很麻烦
npm install --registry=https://registry.npm.taobao.org

安装的过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用

安装的位置会在这里C:\Users\86139\AppData\Roaming\npm\node_modules\npm

9.0、vue-cli环境配置超详细教程 9.0、vue-cli环境配置超详细教程

 

第五步:安装vue-cli

cnpm install vue-cli -g

#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序,通常我们选择webpack
vue list

9.0、vue-cli环境配置超详细教程

 

第六步:初始化一个vue项目

创建一个基于webpack模板的vue应用程序

#这里的myvue是项目名称,可以根据自己的需求起名
vue init webpack myvue

9.0、vue-cli环境配置超详细教程

 

创建项目时的选项详解:

如果不是以学习为目的的话,下面所述的一些no(手动安装)选项可以换成yes(自动安装)

1. ?Project name (myvue) 因为上面已经写了project的名字了所以这里直接回车

2. ?project description (A Vue.js project),项目描述也可以直接回车

3. ?Author 作者

4. ?Vue build 这里有两个选项,我们这选择第一个选项,运行时编译就好了

5. ?Install vue-router? (Y/n) 是否自动安装vue-router , 选择n(这里因为想要学习体验到更多的东西,所以我们选择n,这样手动自行安装可以学到更多的东西)

6. ?Use ESLint to lint your code? (Y/n)? 是否用ESL,我们选n

7. ?Set up unit tests (Y/n) 是否安装测试,这里我们选择不安装,选n

?Set e2e tests with Nightwatch (Y/n) 选n

8. ?Should we run npm install for you after the project has been created? (recommended),这里是问我们是否让他自动执行npm的命令,这里有三个选项,我们选择第三个No, I will handle that myself

第七步:初始化并运行

cd myvue
npm install
npm run dev

1、先转到myvue项目的文件夹下

2、然后npm install安装所有他需要的环境

9.0、vue-cli环境配置超详细教程

 如果遇到网络问题:超时的话就重新在执行一遍npm install

3、用npm run dev命令启动服务器即可

9.0、vue-cli环境配置超详细教程

 这样我们的环境就基本配置完毕了

上一篇:卸载 Node.js


下一篇:Day12 学习java(集合)