安装Vue CLI框架 搭建Vue项目

一、安装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 了。

猜你喜欢

转载自blog.csdn.net/firstlt0217/article/details/112836176