vue-cli的安装与项目建立

vue使用背景

零基础学习前端，刚开始入门三件套，为了跟上项目进度，在队里小伙伴的推荐下开始接触vue。

预备概念

单页面应用程序

单页面应用程序（英文名：Single Page Application）简称SPA，指一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成

通常一个工程，即一个Demo项目，都包括四个部分:index.html，css，js，images。 后三个是文件夹，内部分别存放CSS文件，JS文件和图片文件

单页面应用程序的开发难度较高

vue-cli

vue-cli是vue.js开发的标准应用程序，是用于快速搭建SPA的，简化了程序员基于webpack创建工程化的Vue项目的过程。

vue-cli安装&使用

1. 安装和使用

vue-cli是npm上的一个全局包，使用npm install命令，即可方便的把它安装到自己的电脑上

打开命令行，键入下列指令后回车： npm install -g @vue/cli

验证是否安装成功：键入下列指令查看版本号： vue -V

2. 创建项目

先用cd指令切换到指定的目录，或是直接在文件管理器路径栏内输入cmd回车

基于vue-cli快速在当前目录下生成工程化的vue项目： vue create 项目名

选择预设的环境，使用方向键选择，前两项是基于vue2或vue3创建demo和eslint，第三项是手动选择要添加的功能，这里初学者建议选择第三个

然后回进入到feature选择页面，打※号的项目是安装，上下方向键选择，空格键确认安装，回车键进入下一个界面，这里安装babel，css预处理器

选择vue版本，我这里选择vue2

css预处理器这里，选择less

是否将babel，eslint的配置文件单独存放或是与json的包一起放置，这里选择独立放置，清晰一些。如果选择第二项，package.json文件就会出现很多的配置信息，这样不易分类，一个文件夹应该只做一件事情。

是否将上述设置作为以后创建项目的预设值 y/n

给预设起个名字

 

之后就会开始下载，包括配置git仓库，下载依赖包等等，这里鼠标不要左击窗口，会冻结窗口，取消冻结的方式也很简单，选中窗口Ctrl+C或者右键。下载完成结果图

 

 

如果报错可能是cmd没有用管理员身份启动

到这里项目就成功的创建完毕了

3. 运行项目

先cd到项目根目录(这里的demo-first是我的项目名)： cd demo-first

然后运行项目： npm run serve

这里窗口执行完就说明编译成功了，这时如果窗口内光标一闪一闪，的说明正在监听源代码的变化，这里用的是webpack-dev-serve插件，因此这个窗口不要关闭，关闭该项目等于项目停止。此外这里的Local是本地地址，Network是局域网的地址，暂时我们只需要用到Local

 

复制Local的地址，然后粘贴到浏览器的地址栏中即可进行访问，界面如下：

 

这里建议使用vscode终端打开项目文件，即右键demo-first文件，使用vscode打开项目即可（如果右键不出现也可以使用拖拽文件夹至vscode快捷方式的方式来打开相应项目），这样便捷，不需要打开命令行，在vscode终端中同样能起到监控效果。接下来做vscode展示

4. vscode运行项目

进入vscode之后打开终端

 

输入： npm run serve

成功结果显示：

 

项目目录介绍

根目录下文件

 

1. node_modules文件夹：，存放第三方包

2. src文件夹，项目源代码目录，存放源代码文件

3. public文件夹：存放.ico网站小图标和SPA的单个html文件

src目录下文件

 

1. assets文件夹：放置第三方静态资源，比如图片资源，css样式表

2. components文件夹：放置封装的、可复用的组件

3. mian.js：项目入口文件，整个项目的运行要先执行它

4. App.vue：是项目的根组件，用来定义UI结构

vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中

其中：

1. App.vue用来编写带渲染的模板结构

2. index.html中需要预留一个el区域

3. main.js把App.vue渲染到了index.html所预留的区域中

这里把三个文件的相关代码一块拿出来对比着看就好理解了

 

 

通过main中Vue构造函数中的render函数，将从App.vue组件导入的App渲染给el标签，这时html文件里的<div id="app"></div>就相当于被替换成了template标签中的<h1>123</h1>了。