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

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

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

 

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

 

 

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

node -v

npm -v

 

第四步：安装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

 

 

第五步：安装vue-cli

cnpm install vue-cli -g

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

 

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

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

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

 

创建项目时的选项详解：

如果不是以学习为目的的话，下面所述的一些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安装所有他需要的环境

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

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

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