vue-cil的使用
单页面应用程序
单页面应用程序(Single Page Application) 简称 SPA,指一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这个唯一的一个页面完成
vue-cli
vue-cli
是Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的Vue 项目的过程
安装 vue-cli
vue-cli
是 npm
上的一个全局包,使用 npm install
命令,即可方便的把它安装到自己的电脑上
1 | npm install -g @vue/cli |
在命令行输入vue -V
如果回显 @vue/cli 版本号
就说明安装成功了
如果之前安装过低版本的可以通过下面两个命令来卸载重装
1 | npm uninstall -g vue-cli |
vue-cli 的使用
在终端下运行如下的命令,创建指定名称的项目,注意我们项目名称最好是英文
1
vue cerate 项目的名称
输入后我们会看到控制台有一些提示
我们可以通过控制方向键来选择创建项目使用的vue版本,其中前两个就是创建vue2 和 vue3 的项目,项目里默认安装
babel
和eslint
,最后一项就是我们可以自己选择创建的版本和需要安装的包我们选择最后一项并且更具自己需要选择要安装的包,选择最后一项后可以看到如下图
如果项目中使用
less
我们需要选则CSS Pre-processors
css 预处理器,至于Linter / Formatter
是用来规范代码风格的,如果我们现在安装上可能就不会写代码了,最下面两个Unit Testing
和E2E Testing
是进行组件测试单元测试的,目前还不需要,先不勾选确认无误按下回车后,就会进入选择vue版本的界面,目前学习 vue2 ,就选择 vue2 就好了
对于使用的css预处理器,我们也需要进行一次选择,这里我选择
less
我们还需要选择
bable
,ESLint
,webpack
等插件的配置文件的位置,第一个是指每个单独一个配置文件,下面是指都放在package.json
中,选择第一个让他们独立开最后一个是询问要不要把刚才的配置存为一个预设,如果存的话就输入
y
,我们存一下,防止以后每次都选比较麻烦,这里我们还需要给预设起名字,这个自己知道就好上面都做完回车后,就开始下载相关依赖和创建项目了,这个时候我们不要动这个窗口,如果我们用鼠标点了一下,会阻断运行,如果不小心阻断了运行,可以通过
Ctrl+c
来恢复.全部创建结束后,会提示我们怎么把项目跑起来如下图
我们看一下项目目录结构是什么样子的
node_modules
是一些包,我们不用在意
public 中放的就是我们的单页面,里面的favicon.ico
浏览器标签栏要显示的小图标
除了一些配置文件和包文件,其他值得我们注意的就是src
目录vue 项目中 src 目录的构成:
assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
App.vue 是项目的根组件。
vue 项目的执行流程
在工程化项目中,vue 要做的事情很单纯:通过 main.js
把 App.vue
渲染到 index.html
的指定区域
比如在下面的例子中,我自己写一个vue模板结构渲染到
index.html
中去
- 首先创建自己的
Test.vue
文件 ,随便写两行- 在
main.js
中引入自己写的Test.vue
- 在
main.js
的 Vue 构造函数中,把render
属性指向我们的文件
1 | // 导入vue 包,得到Vue的构造函数 |
1 | <template> |