文章目录
前言
本次操作实例各软件版本如下:
1、Node: v10.15.0
2、npm:6.4.1
3、webpack:4.41.2
4、@vue/cli:4.0.5
1、安装vue、vue-cli
1.1安装vue
npm install -g vue
1.2 安装vue cli
要求Node.js版本为8.9以上。
vue cli包名称已经由 vue-cli 改为 @vue/cli,如果全局安装了老版本,可以先卸载在重新安装新版本。
npm install -g @vue/cli
2、项目开发
2.1 创建项目
1)创建项目
vue create my-proj
按Enter后进入下一步
2)选择配置
default (babel, eslint) //默认配置
Manuall select features //手动配置
- 使用方向键进行选择
这里为了更清楚连接后续的配置选项,选择手动配置
3)选择所需功能
空格进行选择或取消,按a全选,i反选
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel //转码器
( ) TypeScript //支持typescipt语法
( ) Progressive Web App (PWA) Support
( ) Router //Vue路由
( ) Vuex //支持Vuex
( ) CSS Pre-processors //支持css预处理
(*) Linter / Formatter //支持代码风格检测和格式化
( ) Unit Testing //支持单元测试
( ) E2E Testing //e2ec端到端测试
选择babel、router,vuex、css、linter等
4)是否使用hostory router:
Vue-Router 利用浏览器自身的hash模式和history模式的特性来实现前端路由。
hash: 浏览器url址栏 中的 # 符号(如这个 URL:http://www.abc.com/#/hello,hash 的值为“ #/hello”),hash 不被包括在 HTTP 请求中(对后端完全没有影响),因此改变 hash 不会重新加载页面
history: 利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法(需要特定浏览器支持)。单页客户端应用,history mode 需要后台配置支持
输入n,选择 hash
5)选择css预处理器
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
选择 less
6)代码检测工具
ESLint with error prevention only //仅在由错误时提醒
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
选择ESLint + Standard config
7)何时检测
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
>(*) Lint on save //保存时检测
( ) Lint and fix on commit //fix和commit时检测
选择 lint on save
8)如何存放配置
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files //独立文件
In package.json //存放到package.json
选择 package.json
9)是否保存本次配置
保存后,后续项目可以直接用这个配置
Save this as a preset for future projects? (y/N)
选择保存。
10)选择保存后
Save preset as:
输入一个proset名字
上述操作完了后,vue cli开始初始化工程
初始化完了后,用VS Code打开,看以下工程目录
3、跑起来
npm run serve
E:\Dev\github\my-project>npm run serve
> my-project@0.1.0 serve E:\Dev\github\my-project
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 16154ms 21:45:52
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.104:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
等运行完后,在浏览器中打开http://localhost:8080/
至此,一个Vue项目就跑起来了。
4、添加自己的组件
项目跑起来了,现在来写一个组件,并使用路由功能
4.1 定义组件
在 src/views目录下,新建文件HelloGIS.vue
HelloGIS.vue
<template>
<div>
Hello GIS, Hello Map
</div>
</template>
<script>
export default {
name: 'HelloGIS'
}
</script>
4.2 修改路由配置
打开 src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
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')
}
]
const router = new VueRouter({
routes
})
export default router
在 routers中添加一个对象
{
path: '/gis',
name: 'gis',
component: () => import('../views/HelloGIS.vue')
}
使/gis地址 ,指向刚刚添加的HelloGIS.vue组件上.
4.3 修改App模板
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<!-- 导航到新添加的HelloGIS -->
<router-link to="/gis">GIS</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
保存,重新打开页面,看下效果
参考文档:
官网文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
博客:https://www.cnblogs.com/liuqiuyue/p/9699796.html