vue项目创建和部署使用

背景

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架vue，作为一个基础的了解。vue的作者是国人尤雨溪。官网描述vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：

1. 易于上手。简单了解html,js,css即可以学习使用；
2. 灵活。有十分繁荣的生态，且在不断充实中。
3. 高效。有良好省心的优化，在gzip下仅20kb的大小。

介绍

基于vue的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没有nodeJs环境，所以直接从环境搭建开始。

本地使用的visual studio code 开发，对于前端这种所见所得的特性，vs code 轻量，比较适合。安装好相应的vue插件即可使用。

过程

1. nodeJs
   根据本地环境从官网http://nodejs.cn/download/下载对应安装包，本地为.pkg的MacOS安装包。
2. 配置npm
   npm是nodeJs随带的包管理工具，鉴于网络情况，国内建议配置成淘宝的源，如下：
   验证安装

npm -v

配置淘宝源，注意-g是全局安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成之后将使用cnpm替换npm，验证cnpm:

cnpm -v 
#显示
[email protected] (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
[email protected] (/usr/local/bin/node)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 19.6.0 
registry=https://r.npm.taobao.org

之后的依赖安装就可以使用cnpm install 或简写cnpm i 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用-g -D --save等参数设置安装范围。

3. 安装依赖

开始的项目使用了webpack，所以也安装了webpack，后续都使用vue-cli脚手架来构建项目。

安装vue-cli
vue-cli是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。
安装命令

cnpm install -g @vue/cli

验证安装

$vue --version 
@vue/cli 4.5.8

3. 创建demo

vue create hello-world

之后我们看到一个hello-world的文件夹，里边包括默认生成的一些配置和App.vue,main.js等程序文件，如下是支持vue-router路由（控制页面切换等操作）的一个main.js具体内容

//main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import app4 from './demo/app4'
import app3 from './demo/app3'

Vue.use(VueRouter)

const routes = [
  {path:'/', component:App},
  {path:'/app3',component:app3},
  {path:'/app4', component:app4}
]

const router = new VueRouter({
  mode:'history',
  routes
})

// new Vue({
//   el: '#app',
//   render: h => h(App)
// })

new Vue ({
  router
}).$mount("#app")

注意使用路由时，不要忘记在主模板里添加标签，表示路由切换的位置，否则路由页面无法正常展示。

运行示例

先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行

cnpm run serve

之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。

部署支持

既然提到了部署，默认的部署使用npm/cnpm进行，如下命令，输出内容在/dist目录。

cnpm run build

可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

这里说下vue-cli脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。

启动vue-cli图形界面

vue ui

然后按照提示访问即可。

vue ui

总结

以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托vue提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。

参考资料

1.Vue.js介绍
2.Vue CLi脚手架