vue-cli脚手架是什么及其脚手架搭建

作为有多年Asp.Net WebForm及Winform &WPF开发经验的老鸟来说,入门学习vue的过程中也碰见不少迷惑之处。首页一直在写Html+CSS+Javascipt(JQuery), 对现在比较火的vue也比较好奇,入门探一个究竟。

首先一直看到和听到利用vue-cli搭建脚手架,听的觉得很新鲜,说到脚手架映入我脑海的就是工地上看到的脚手架,

vue-cli脚手架是什么及其脚手架搭建_第1张图片

难道这里和脚手架有关系或是什么谐音之类的神秘技术呢?

哈哈,现在想想自己摸黑走夜路的过程真是可笑!叹程序员的智商真是高,想到这么形象和好理解的名字。

vue-cli就是Vue的脚手架工具,和我们工地看到的脚手架真是那么一回事,它帮助我们搭建基本的开发环境,好比架子搭建好了,利用它可以搞定目录结构,本地调试,单元测试,热加载及代码部署等。

了解到vue-cli后,下面实际做下vue-cli的安装:

步骤一:npm install -g vue-cli; (-g表示全局安装)

vue-list 查看可用的模板;

步骤二:选择好vue项目所在的路径,建好工程文件夹,比如:my-vue,

cd my-vue到此目录路径下:再在此目录下创建一个基于Webpack模板的新项目,执行 vue init webpack firstApp;

init 初始化的意思,firstApp为此项目命名的文件夹名称,注意和项目名区分,在回车后需要输入项目名,描述和作者及选择是否进行单元测试等;此时工程所在物理磁盘目录结构为

vue-cli脚手架是什么及其脚手架搭建_第2张图片

步骤三:cd your firstApp; npm install; 此过程为“安装项目依赖”:即安装项目所依赖的node 包。


安装后,会在上图中多出一个node_modules文件夹。

步骤四:npm run dev;

vue-cli脚手架是什么及其脚手架搭建_第3张图片

然后浏览器打入http://localhost:8080

vue-cli脚手架是什么及其脚手架搭建_第4张图片

看到这个界面说明vue-cli搭建的项目运行成功,亦即vue的脚手架工具已经搭建完成,具体的项目开发是在src目录进行。

下面看下目录结构:

vue-cli脚手架是什么及其脚手架搭建_第5张图片

你可能感兴趣的:(Vue)