关于vue-cli搭建项目过程中的一些基本问题与个人理解

Posted 2020-10-31 laysunny

刚接触vue.js不久，组件化的创作模式感觉很棒。组件好比每一块积木，而一个项目的完成就像你去搭一个积木模型，每一块积木都可以互相配合搭建各式各样的模型，但又相对独立可以重复使用。这就是传说中的低耦合高复用。

因公司要求使用vue-cli脚手架的形式搭建项目前端框架，参照一些网上的包含官网文档的指导，对搭建的整个过程当中碰到的一些基本问题做一个总结并对整个项目结构做一个梳理。

一、安装node.js

 官方网址：https://nodejs.org/zh-cn/

选择合适自己的版本进行安装。

1.1、node环境变量的配置 

　　参照：https://jingyan.baidu.com/article/fec4bce2950133f2618d8b02.html

桌面cmd命令台输入 node -v 、npm -v 显示node及包管理器版本号则安装成功！

二、安装vue-cli

1.1、node目录下打开命令台，输入 npm install -g vue-cli 若是速度较慢，可设置国内镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　失败可输入 npm cache clean 清理缓存，后面的安装也可照此操作。

1.2、上面步骤中如果你是使用cnpm安装的话，则 cnpm install -g vue-cli 其中集成了webpack打包工具，故不用再次安装

1.3、使用 vue -V大写检查是否安装成功

三、使用vue-cli脚手架搭建项目框架

1.1、在你喜欢的位置新建文件夹，不能使用chinese。

　　vue init webpack 自定义文件夹名 

1.2、跑到项目目录下打开控制台，输入 npm run dev 即可运行项目！