哈喽哈喽 大家好,今天给大家分享一下 创建Vue 工程的小工具 vuecli
Vue cli 就是 vue的 client,客户端,是一个命令行工具,能帮我们快速构建一个 vue的标准工程。是官方cli,支持vue2和vue3不同版本。初始化一个vue工程,引入相关依赖。
首先你本地需要有node环境,包括node和npm。请参考官方文档安装node环境。 https://nodejs.org/en/
你可以在命令行状态下敲入 如下命令检查自己是否有node环境
有了node环境,我们可以通过npm来安装vuecli,当然,如果你习惯用yarn,请先使用 npm安装yarn。
检查vuecli是否安装成功
cli安装好后,我们可以创建标准的vue工程了。
命令行敲入 vue create XXX
其中XXX是你希望的工程名,会在当前目录下生成同名文件夹的工程文件。
提示要创建Vue的哪个版本,我们选择第一项直接回车,就是创建Vue2的默认工程。
经过一系列提示后,工程就创建好了,我的工程名是home,最后提示我进入home后,运行 yarn serve 或者 npm run serve ,来启动默认的webpack dev server来运行服务。
服务启动完成, 提示我可以访问 localhost:8080 来访问我默认创建的这个vue 前端页面
我们打开浏览器,在地址栏键入 http://localhost:8080 后回车
一切顺利的话我们会看到如下页面
这个就是我们通过vuecli默认创建出来的一个vue工程了的默认页面。
工程目录结构如下。
node_modules: 前端工程的依赖库,node-js的npm会通过package.json 管理 本地包,其中外部依赖库,会在npm install时,安装到node-modules下。
public: 需要静态发布的资源目录,默认里面放了一个index.html,这个就是我们开发页面的基础html。之后vue创建的动态dom都是挂在到这个页面上的,如果存在不在npm下管理的第三方插件,可以通过 public这个文件来发布,并在index.html中载入这些外部依赖。
src:源代码目录,其中main.js 就是我们前端程序的主入口。根组件就是从这里最开始实例化的,这个根组件通常就是 App.vue。通常会在App.vue中搭建 站点的主结构,引入vue router,在App.vue下根据url映射决定显示哪个视图组件。
.gitignore: git仓库的忽略文件,当前目录下哪些文件不需要git仓库托管,可以在ignore文件中记下文件名,在git add时会忽略掉那些文件。
babel.config.js: 因为我们的浏览器不一定会认识现在主流的es6语法,所以我们编写的js代码,是通过webpack编译发布的,其中babel就是用来解析es6的,es6也存在不同的版本,可以通过这个文件,配置es6的特性。
package.json : npm的包描述文件,当前工程的特性在这个文件中
README.md:本身是个markdown格式的文件,markdown是类似html的格式化文档,通过特殊字符表达特定格式,一般网站都会默认读取README.md形成说明页面。
除了默认的依赖,我通常会在package.json中添加如下一下,以方便开发。
其中pug可以以pug语言来书写html模板,大大减少了不必要的字符,少敲了很多代码。
sass是在写css时,语法和pug高度匹配,非常节省代码
这里需要注意的是,node-sass对node-js版本是有对应关系的,如果版本不匹配,工程会有编译错误,请在node-sass的官方网站检索对应的node-js的版本,下载对应的node-sass。
相应的,sass-loader与node-sass也是有版本对应关系的,要注意