一、安装Node.js
访问官网 https://nodejs.org/en/,首页即可下载。安装原因:npm集中于Node.js中,所以用npm(你怕吗)安装Vue Cli,首先应安装Node.js。
安装步骤:下载完成后运行安装,默认下一步即可。
二、检查Node.js是否安装成功
cmd 中输入:node -v
如上图,出现版本号,说明已经安装成功。同时,npm 包也已经安装成功,可以输入 npm -v 查看版本号
三、npm 更新至最新版本
cmd 输入 npm -g install npm
四、安装 cnpm,即 npm 国内镜像
原因:使用 cnmp 下载内容会比较快,但下载的包可能不是最新的(这个可以忽略)。
安装 cnpm 的命令为 :npm install -g cnpm --registry=https://registry.npm.taobao.org
脚下留心:
cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了,只是比较浪费时间。
五、安装vue cli
cmd命令(vue2.x):npm install -g vue-cli
cmd命令(vue3.x):npm install -g @vue/cli
六、搭建Vue项目
1. win+R进入cmd:
2. cd 进入相应文件目录
3. 命令:vue init webpack test-vue //webpack为项目模板,可替换为pwa、simple 等,项目名称test-vue
C:\Users\user>E:
E:\>cd test_vue
E:\test_vue>vue init webpack test_vue
? Project name test_vue
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "test_vue".
vue-router,一定要选是,也就是回车或按 Y,vue-router 是我们构建单页面应用的关键。
接下来等待项目构建完成就 OK 了。