安装CLI
1 | $ sudo npm install -g @vue/cli |
快速构建原型
1 | $ sudo npm install -g @vue/cli-service-global |
创建一个文件夹，随意命名：instant-prototyping，在此文件夹下创建App.vue文件，文件内容如下
1 | <template> |
而后在该文件目录下，执行：
1 | vue serve |
编译后可通过浏览器地址：http://localhost:8080/预览。
也可以作为生产包部署。使用：
1 | $ vue build |
将生成一个dist的包。
创建一个项目
1 | $ vue create hello-world |
弹出一个列表。默认选中(babel, eslint)，回车即可，后期组件可根据需要添加。
当然也可以使用GUI通过浏览器的图形界面安装，比如自选插件：
Router(ESLint with error prevention only)+Unit Testing(Jest)，可以保存一个预置信息，以便下次构建其他项目时直接启用。内建了图形化操作界面：比如添加vue插件、管理项目依赖、进行Vue CLI和ESLint配置、执行运行、打包、代码风格检查等任务。
使用GUI
命令行根目录下执行：
1 | $ vue ui |
启动GUI界面，点击Create a new project，选择项目安装目录,进行初始化配置，根据步骤一步一步提交即可，等待几分钟即可创建完成。
而后会提示你，启动开发服务器。
1 | $ cd [ project root folder] |
开发
静态资源管理
两种方式：
- 在JavaScript导入或templates/CSS导入相关路径。这种引用被webpack管理
- 放在
public目录和引用绝对路径。这些资源仅仅被复制而不通过webpack管理。
URL翻译规则
- 绝对路径会保持原样（eg：
/images/foo.png）； - 以
.开始作为一个模块请求解析为基于文件夹结构的文件系统； - 以
~开始，在它之后的任何内容被解释为模块请求。这意味着你能引用node modules内部的资源； - 以@开始也被推荐为一个模块请求。这是有用的因为
Vue CLI默认的别名@为<projectRoot>/src.(仅在templates)。
构建现代、灵活且功能强大的前端工作流
快捷流畅的前端工作站需要几个要素，简洁快速的界面搭建，我们使用一个库Element，管理组件间关系的路由，使用Vue-Router，用于与后端服务器进行数据交换的工具，使用Axios。我们一个一个看。
Vue-Router
首先安装Vue-Router
1 | $ vue add router |
Vue本身使用组件组合应用。vue + router，我们需要做的就是映射我们的组件到路由，使路由知道渲染他们。如果你在使用CLI创建项目的时候选择安装vue-router，那么项目会为我们生成router的基本使用示例router.js，router.js是完成组件映射关系的文件。
1 | // router.js |
- 首先导入
Vue和Router，然和导入需要路由的组件Home.vue - 调用
Vue.use(Router)使用路由 - 创建路由实例
export default new Router({...}) - 在路由实例内部定义路由
routes:[ {path: '/', name: 'home', component},...]
把该路由导入程序入口文件，并挂载到根实例，保证全局响应router。
1 | import Vue from 'vue' |
如上我们导入router.js，使用router选项注入router给Vue的根实例。
1 | // App.vue |
在HTML中，使用router-link导航，使用to指定链接的页面，<router-link>将被渲染为<a>标签。<router-view>路由的出口，与路由匹配的组件内容将被渲染到这里。
在任何组件内部，我们可以通过两个方式访问路由：this.$router和this.$route。
Element
当然，接下来为了演示路由的其他细节功能，我就结合一个基于Vue的UI库element，由于我们使用@vue/cli version 3.x搭建的项目，element为vue-cli@3提供了一个插件Element plugin,可以快速构建一个基本的element工程，进入项目根目录，在Terminal键入如下命令：1
$ vue add element
当然这期间会跟随构建过程做一些基本的配置：
- 选择导入Element的方式：全局导入即可
Fully import(Default)； - 你希望重写Element的SCSS变量吗，填写
Y（yes）后直接回车； - 选择你想加载的本地化语言，直接回车默认中文
(zh-CN(Default)即可。
OK,安装完成后我们看到src下多了一个element-variables.scss文件，这里面引入了element的icon和字体。1
2
3
4
5
6
7
8
9
10
11
12// eleemnt-variables.scss
/*
Write your variables here. All available variables can be
found in element-ui/packages/theme-chalk/src/common/var.scss.
For example, to overwrite the theme color:
*/
$--color-primary: teal;
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
而src/plugins/element.js,对element和scss文件进行引入并调用：
1 | // element.js |
而后在应用的入口程序main.js导入element.js文件:
1 | import './plugins/element.js' |
项目实战演示
我们会定义一个基本项目的雏形，包含登录页面，输入用户名、密码后展示主页，而后采用侧边栏分为两个栏目切换，切换完成后退出页面的基本流程，ok，我们开始：
首先，我们创建我们用到的三个页面：一个登录页Login.vue,一个主页面Home.vue,和一个About.vue,
因为我们要使用页面导航，所有我们需要在Router里建立页面对应的路由：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/',
redirect: '/login',
},
{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
},
{
path: '/',
name: 'home',
component: Home,
children:[
{
path: '/helloworld',
name: 'helloworld',
component:() => import('./components/HelloWorld.vue')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
},
]
})
以上我们添加了一级页面登录页Login.vue和主页Home.vue，在Home.vue里面我们添加了用于分栏的两个页面HelloWord.vue和About.vue。
接下来开始写项目代码，写一个简单的登录页面，代码如下：
1 | <template> |
在登录页，我们拟定了一个用户名和密码，输入正确即可登录成功，进入主页，展示主页的一个默认分栏内容HelloWorld页。
注意：这里面有一个class=”login-wrap”,这个我们定义了一个css样式，因为我们的系统样式最好统一，为了方便统一管理，我们定义一个全局样式，在assets/css/theme-green目录下（后两个文件夹需要自己手动创建）创建一个css全局样式文件：color-green.css,定义全局样式：
1 | .header{ |
.login-wrap就是我们登录页的背景颜色，.header一会用于我们主页的顶部栏–浅绿色，一会看到。
我们在assets/css/在创建一个main.css文件，用于创建我们全局的尺寸，字体，内容等样式。
1 | *{margin:0;padding:0;} |
main.css里面我们定义了页面的尺寸，body体的文字，定义了标准的文本a{…}，为none即无修饰，以及content的样式等信息。
而后，我们将这两个css文件导入到App.vue进行全局引用：
1 | // App.vue |
我们已经写好的登录页面
当然为了更好的理解，我们先来看一下主页的基本结构：
这样，一目了然，简单明了，我们点击登录按钮进来，首先映入眼帘的是主页的欢迎分栏页内容，主页上包含了顶部的header区域，左边的管理列表侧边栏，和中间的内容区域欢迎分栏（默认的首页–HelloWorld.vue）。点击关于分栏进入该页面，当然目前只有一句话内容：This is an about page。点击admin用户名会弹出带退出按钮下拉菜单，点击退出按钮回到登录页面。
为了让结构更为清晰，我们使用封装思想，在src/components/创建Header.vue和Sidebar.vue用于书写主页页头和侧边栏。
1 | // Header.vue |
如上这里面可以显示用户名称和icon，响应退出事件。
1 | // Sidebar.vue |
Sidebar.vue主要实现侧边栏的分栏内容设置。
而后，在Home.vue页面引入这两个组件：
1 | // Home.vue |
至此，我们完成了后台管理界面基本雏形的搭建，项目目录结构如下：
总结一下：
我们使用Vue CLI3搭建了项目，引入了Vue Router做页面路由，引入Element做界面组件，并完成了一个从登录-展示页面结构-退出的完整页面流程。通过这些操作我们学会了如何创建项目，以及路由和Element的基本用法，一个简单高效的前端工作流搭建完成。
其他
自定义主题
我们可以在主题预览,下载完整的主题包，而后导入主题，比如我们将下载的主题命名为element-green，放到项目的assets文件夹下面。直接在main.js导入即可：import './assets/element-green/index.css'，默认主题可以注释掉了。
网络请求
很多时候我们都需要请求后台数据来调试我们的界面，Vue官方推荐使用axios。
安装axios
1 | npm install axios |
这个请求会在很多页面使用到，所以我们在程序的入口将它代理给Vue，打开main.js文件
1 | import Axios from 'axios' |
这样的我们在其他组件页面直接使用this.$http.get/this.$http.post的形式即可访问API，无需再导入头文件。
使用参考：
vue.js中使用Axios
使用vue-cli+axios配置代理进行跨域访问数据
跨域问题解决
由于我们的开发服务器和我们请求的API可能不在一台机器上，所以如果你直接使用axios请求API可能会出现跨域问题，即：请求被浏览器拦截。
我们需要在vue.config.js文件下作如下代理访问配置：
1 | module.exports = { |
8080是我们要监听的端口，target后面为我们要请求的API的host地址。我是怎么知道的这个，搜索呗，百度：
关键词：vue axios cli跨域
上图打开第二个链接指向这里：
Vue-cli@3版本下使用axios如何设置跨域配置？,而后这个链接提示来这里找，即官方文档有写：
Vue CLI | vue.config.js | devServer.proxy,由于官方提示的信息不全面，让参考 http-proxy-middleware,于是点进去看了看，没有合适的说明，怎么办呢，继续关键词搜索呗：
关键词：axios vue-cli@3跨域 devServer
如上图，点开第二个链接：vue-cli3.0 axios跨域请求代理配置及端口修改,
ok，这里有配置完整的答案。在官方的代码段的基础上加一个端口号嘛。到此，解决了这个跨域问题，你看看，有时候正确的关键词搜索能力是高效解决问题的关键，因为你碰到的问题很可能别人也碰到并解决，而且分享出来了，找到即可。
注意：
配置完代理后要再次重启服务器配置才能生效。控制台运行npm run serve即可。
延伸阅读：
Vue CLI | Config REference: 看更多参数配置。
而后，打开Home.vue页面，在mounted()方法中，作如下请求：
1 | mounted() { |
如果使用Google Chrome浏览器，打开后台的network板块即可看到响应数据。
代码版本控制
创建远程仓库
以码云代码管理平台为例，点击主页+号创建私有仓库，填写仓库配置信息：
1 | 仓库名称：XXX |
点击创建按钮即可。
2.将远程仓库克隆到本地，我们使用一个软件名为Sourcetree（Sourcetree具体用法，自行百度）。
打开SourceTree主页，点击New...下拉菜单，选择Clone from Url，把刚刚我们创建的远程仓库克隆到本地。会弹出一个对话框：
Source URL：到码云上，找到刚刚我们创建的仓库，点击克隆/下载按钮，在弹出的对话框中点击复制按钮复制HTTPS链接，将复制到剪切版的URL黏贴到此处即可。
Destination Path：选择一个存储到本地项目文件夹，可点击...快捷选择。
Name：会在Destination Path填充后自动生成。
点击Clone即可。
到此，本地仓库已经创建好，将刚刚创建好的项目拖入这个文件夹即可。我们以后就可以用Sourcetree进行版本控制了。
注意
我们刚刚创建项目的时候项目本身有一个文件夹HelloWorld，而刚刚我们创建本地仓库也有一个文件夹，比如名为HelloWorldGit，这样就我们的项目内容路径为HelloWorldGit/HelloWorld/entity files,这样就会导致我们的实体内容路径较深，可以把第三层的实体内容移出来。中间一层的文件夹删掉，变成HelloWorldGit/entity files。
使用WebStrom进行版本管理的一些提示
我们开发工具使用的是WebStorm，我们可以将新创建的项目添加到WebStorm的版本控制下：
1 | CVS | Git | Add (或 Alt+command+A) 添加代码为本地版本控制 |
使用WebStorm提交到本地仓库，WebStorm会进行代码检查。常见错误有：
Warning -- Unused default export
确定代码没有问题，可以去掉此提示，点击WebStrom程序主板右下角的小人头，搜索javasript general unused，勾掉Unused global symbol。Warning: Unterminated statement
找到对应位置，添加中断声明，可能是添加一个分号而已。.idea文件报错：Error:Element profile is not allowed here..idea文件是WebStorm自动生成的配置文件，是隐藏文件，若损坏或删除。可能导致程序的实体文件夹无法在WebStorm的工程目录中显示。忽略此错误即可。
最后在使用WebStorm Commit代码时，如果代码检查依然有误，会提示直接提交还是Review审查代码，可以Review看一遍所有的错误和警告，确认没有问题直接commit提交即可。提交到本地仓库之后，还是建议使用SourceTree推送代码到远程仓库，因为这个界面更简洁更方便友好，尤其是同时管理多个项目时。
以上实战项目的git地址：hello-world
