单页面应用程序

单页面应用程序(Single Page Application) 简称 SPA,指一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这个唯一的一个页面完成

vue-cli

vue-cli 是Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的Vue 项目的过程

官网传送

安装 vue-cli

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

1
npm install -g @vue/cli

在命令行输入vue -V 如果回显 @vue/cli 版本号 就说明安装成功了

如果之前安装过低版本的可以通过下面两个命令来卸载重装

1
2
npm uninstall -g vue-cli
npm install -g @vue/cli

vue-cli 的使用

  1. 在终端下运行如下的命令,创建指定名称的项目,注意我们项目名称最好是英文

    1
    vue cerate 项目的名称

    输入后我们会看到控制台有一些提示

    我们可以通过控制方向键来选择创建项目使用的vue版本,其中前两个就是创建vue2 和 vue3 的项目,项目里默认安装 babeleslint ,最后一项就是我们可以自己选择创建的版本和需要安装的包

    我们选择最后一项并且更具自己需要选择要安装的包,选择最后一项后可以看到如下图

    如果项目中使用 less 我们需要选则 CSS Pre-processors css 预处理器,至于 Linter / Formatter 是用来规范代码风格的,如果我们现在安装上可能就不会写代码了,最下面两个 Unit TestingE2E Testing 是进行组件测试单元测试的,目前还不需要,先不勾选

    确认无误按下回车后,就会进入选择vue版本的界面,目前学习 vue2 ,就选择 vue2 就好了

    对于使用的css预处理器,我们也需要进行一次选择,这里我选择 less

    我们还需要选择 bable ,ESLint ,webpack 等插件的配置文件的位置,第一个是指每个单独一个配置文件,下面是指都放在 package.json 中,选择第一个让他们独立开

    最后一个是询问要不要把刚才的配置存为一个预设,如果存的话就输入 y ,我们存一下,防止以后每次都选比较麻烦,这里我们还需要给预设起名字,这个自己知道就好

    上面都做完回车后,就开始下载相关依赖和创建项目了,这个时候我们不要动这个窗口,如果我们用鼠标点了一下,会阻断运行,如果不小心阻断了运行,可以通过 Ctrl+c 来恢复.

    全部创建结束后,会提示我们怎么把项目跑起来如下图

    我们看一下项目目录结构是什么样子的

    node_modules是一些包,我们不用在意
    public 中放的就是我们的单页面,里面的favicon.ico浏览器标签栏要显示的小图标
    除了一些配置文件和包文件,其他值得我们注意的就是 src 目录

  2. vue 项目中 src 目录的构成:

    assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
    components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
    main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
    App.vue 是项目的根组件。

vue 项目的执行流程

在工程化项目中,vue 要做的事情很单纯:通过 main.jsApp.vue 渲染到 index.html 的指定区域

比如在下面的例子中,我自己写一个vue模板结构渲染到 index.html 中去

  1. 首先创建自己的 Test.vue 文件 ,随便写两行
  2. main.js 中引入自己写的 Test.vue
  3. main.js 的 Vue 构造函数中,把render属性指向我们的文件
  • main.js
  • Test.vue
1
2
3
4
5
6
7
8
9
10
11
12
// 导入vue 包,得到Vue的构造函数
import Vue from 'vue'
// 导入 App.vue 根组件,将来把 App.vue 中的模板结构渲染到 HTML页面中
import Test from './Test.vue'
Vue.config.productionTip = false
// 创建vue的实例对象
new Vue({
// el:'#app',
// 把render函数指定的组件,渲染到HTML页面中
render: h => h(Test),
}).$mount('#app')
// 这里没有使用 `el` 而是用了 '$mount()' 方法来指定替换的控件