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命令启动服务器即可
这样我们的环境就基本配置完毕了