Vue.js脚手架vue-cli构建项目

谁践踏了优雅 2022-06-05 02:37 252阅读 0赞

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

1、node下载：https://nodejs.org/en/download/；下载完成检测一下自己有没有下载成功，home键+R cmd打开命令行窗口。

node -v   出现版本号说明安装成功

npm -v    同上

![SouthEast][]

2、访问外网资源，大家都懂的。推荐安装使用淘宝镜像（http://npm.taobao.org/）：

$  npm install -g cnpm --registry=https://registry.npm.taobao.org

安装依赖模块使用方法和npm相同：$  cnpm install \[name\]

\--------------------------------------分割线-------------------------------------------------------

1、全局安装vue-cli：

$ npm install --global vue-cli

2、创建项目（项目最好不要在C盘创建）：（mkdir--cmd命令新建文件夹）

![SouthEast 1][]

2、创建一个基于 webpack 模板的新项目（my-project是自定义，为项目名称）

$ vue init webpack my-project

![SouthEast 2][]

3、cd 到 app 文件夹，然后下载依赖模块

![20171115155253812][]

4、下载成功后，启动项目，输入命令：

cnpm run dev （没安装淘宝镜像的是：npm run dev）

![20171115155316245][]

OK,一个基础的vue-cli项目搭建完成。

![SouthEast 3][]

5、终止项目：Ctrl + C

![20171115155334232][]

上述过程亲测，本人也是个菜鸟，有错误请指正。有疑问请留言评论。

[SouthEast]: /images/20220605/19b2421fe8f742c88fe139d8c5dbf9ce.png
[SouthEast 1]: /images/20220605/6467d0852d244475bd666eb3e6c11a8d.png
[SouthEast 2]: /images/20220605/da08a572b2f044f3839f122f86692897.png
[20171115155253812]: /images/20220605/b250b48fc5514711b3808cde4ee39f52.png
[20171115155316245]: /images/20220605/a9947bfc2b624fc99d200593eae8892c.png
[SouthEast 3]: /images/20220605/3940fdc0318a469bb8921c6aa9941734.png
[20171115155334232]: /images/20220605/a2ee9691d954478d803c599710f3ec68.png