全栈的自我修养: 002使用@vue/cli进行vue.js环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建
Success, real success, is being willing to do the things that other people are not.
成功,真正的成功,是愿意做别人不愿意做的事情。
Table of Contents
当你看到这篇文章的时候,暂且认为你对如何做一个网站有了兴趣.
前言
上一篇讲述了使用 vue-cli
搭建 epimetheus-frontend
, 在一些老项目中确实是这样的, 不过前端框架发版就和坐火箭一样, 你方唱罢我登场
, 一代新人换旧人, 今天来介绍下 @vue/cli
的使用
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过 @vue/cli 实现的交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
- 一个运行时依赖 (@vue/cli-service),该依赖:
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
Vue CLI 的介绍来自于官网,文末有对应的参考地址
删代码,不用跑路
删代码,作为程序员来说应该是一件非常身心愉悦的事情
在上一篇文档我们已经使用老版的 vue-cli
创建了 epimetheus-frontend
, 首先第一步我们先删除了他
epimetheus$ rm -rf epimetheus-frontend
因为新老版本的 vue cli
都是使用的 vue
命令,此时需要把上次安装的 vue-cli
卸载
epimetheus$ npm uninstall vue-cli -g
这样我们又有一个干净的环境了
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
安装@vue/cli
在上篇中,我们使用了 npm install -g vue-cli
完成 vue-cli
的安装
作为新版本,Vue CLI
的包名称由 vue-cli
改成了 @vue/cli
. 我们需要执行以下命令安装
epimetheus$ npm install -g @vue/cli
安装速度还是比较慢的,大家可以喝杯水
安装完成后可以 vue --version
看下版本号
epimetheus$ vue --version
@vue/cli 4.4.6
创建 Vue 项目
这里我们继续创建一遍 epimetheus-frontend
- 我们还是进入上次创建的
epimetheus
目录 - 执行
vue create epimetheus-frontend
创建项目
第一步会提示选择一个preset
, 这里选择默认的 Babel + ESLint
第二步会提示选择package manager
, 这里我们还是选择 Yarn
安装过程可能有点慢,安装完成后,如下
epimetheus$ vue create epimetheus-frontend
Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn
Vue CLI v4.4.6
Creating project in /Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend.
Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.15.2
info No lockfile found.
[1/4] Resolving packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 30.95s.
Invoking generators...
Installing additional dependencies...
yarn install v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 5.79s.
Running completion hooks...
Generating README.md...
Successfully created project epimetheus-frontend.
Get started with the following commands:
$ cd epimetheus-frontend
$ yarn serve
从上面的提示中,我们看到默认创建了一个 git
项目.
根据最后提示,我们可以进入 epimetheus-frontend
, 并在控制台运行 yarn serve
,即可开始运行我们的项目
epimetheus$ cd epimetheus-frontend
epimetheus/epimetheus-frontend$ (master) yarn serve
yarn run v1.15.2
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 2275ms 下午10:13:29
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.4:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
从控制台信息可以看出,访问路径为:http://localhost:8080
这样准备工作基本就完成了
项目结构
相信开发上篇文档,已经可以使用 code
命令,如果还是不能使用,可以根据下面的提示进行安装,这里我们直接使用 code .
打开当前目录
例如:
epimetheus/epimetheus-frontend$ code .
则会将当前文件夹 epimetheus/epimetheus-frontend
在 VSCode
中打开,
如何你安装
VSCode
后,使用code
命令时,提示 not fund, 可以通过 查看 -> 命令面板 输入code
进行安装
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvkCJ2Uz-1593393770883)(img/vscode_install_code.png)]
这里使用了 VSCode
,打开项目后如图:
├── README.md # Default README file
├── babel.config.js
├── package.json # build scripts and dependencies
├── public
│ ├── favicon.ico
│ └── index.html # index.html template
├── src
│ ├── App.vue # main app component
│ ├── assets # module assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js # app entry file
└── yarn.lock
vue-cli3.0修改端口号
其中,我们主要修改 src 下文件,上面提到项目访问端口为:8080
, 为了防止与其他项目造成冲突,这里将端口改为:7000
, 提供两种方式:
- package.json文件下修改 --port
"scripts": {
"serve": "vue-cli-service serve --port 7000",
}
- 在
package.json
同级目下创建vue.config.js
, 并添加以下内容
module.exports = {
devServer: {
port: 7000
}
}
两种方式均可
使用 elementUI
这里使用了
官网:http://element-cn.eleme.io/#/zh-CN/component/installation
这里我们进入刚才的项目目录:并执行 yarn add element-ui
并配置 main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
安装 Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
也就是通过 Vuex ,各个组件可以实时的共享状态
官网:https://vuex.vuejs.org/zh-cn/intro.html
安装
首先我们先安装它 yarn add vuex
配置
首先在 src
下创建 store
文件夹并在其下创建 store.js
文件
即 src/store/store.js
, 同时创建 src/assets/util/cookie.js
src/assets/utils/cookie.js 文件内容
该文件主要用于操作cookie
let cookie = {
setCookie (cname, value, expiredays) {
let exdate = new Date()
exdate.setTime(exdate.getTime() + expiredays)
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = cname + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
},
getCookie (name) {
let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
let arr = document.cookie.match(reg)
if (arr) {
return (arr[2])
} else {
return null
}
},
delCookie (name) {
let exp = new Date()
exp.setTime(exp.getTime() - 1)
let cval = cookie.getCookie(name)
if (cval != null) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
}
}
}
export default cookie
src/store/store.js 内容
这里定义了 userInfo
用来保存当前的用户信息,包含一个 name
和 token
import Vue from 'vue'
import Vuex from 'vuex'
import cookie from '../assets/utils/cookie'
Vue.use(Vuex)
const userInfo = {
name: cookie.getCookie('name') || '',
token: cookie.getCookie('token') || ''
}
const store = new Vuex.Store({
state: {
userInfo: userInfo
},
mutations: {
setUserInfo (state) {
state.userInfo = {
name: cookie.getCookie('name'),
token: cookie.getCookie('token'),
}
}
}
})
export default store
在 main.js
添加Vuex
配置,
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store/store'
import App from './App.vue'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
安装 axios
Promise based HTTP client for the browser and node.js
axios 是一个基于 Promise 的 http client, 通过他,我们向后端进行数据交互,如果你不喜欢它,可以使用jquery
的 ajax
代替.
我们来安装一下 yarn add axios
最终 main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store/store'
import App from './App.vue'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
github
参考
- @vue/cli : https://cli.vuejs.org/zh/guide/
全栈的自我修养: 002使用@vue/cli进行vue.js环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)的更多相关文章
- 全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)
全栈的自我修养: 环境搭建 Not all those who wander are lost. 彷徨者并非都迷失方向. Table of Contents @ 目录 前言 环境准备 nodejs v ...
- SpringBoot,Vue前后端分离开发首秀
需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...
- 全栈的自我修养: 003Axios 的简单使用
全栈的自我修养: Axios 的简单使用 You should never judge something you don't understand. 你不应该去评判你不了解的事物. 全栈的自我修养: ...
- 全栈的自我修养: 0005 Java 包扫描实现和应用(Jar篇)
全栈的自我修养: 0005 Java 包扫描实现和应用(Jar篇) It's not the altitude, it's the attitude. 决定一切的不是高度而是态度. Table of ...
- vue+mockjs 模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- 如何利用vue和php做前后端分离开发?
新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- 一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器
一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- Spring Boot + Vue 前后端分离开发,权限管理的一点思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
随机推荐
- linux笔记-工作
根据进程id或进程名查看端口号 netstat -antup|grep 2073 netstat -antup|grep processName 查看某个端口号是否被占用 netstat -tln | ...
- CSS概念与CSS选择器
CSS简述 CSS被称为级联样式表或者CSS样式表.CSS也是一种标记语言. CSS主要用于设置HTML页面中的: 1.文本内容(字体,大小,对齐方式等), 2.图片的外形(宽高,边框样式,边距等), ...
- KB0002.对DoraCloud的桌面模板系统盘进行扩容
KB0002.对DoraCloud的桌面模板系统盘进行扩容 DoraCloud的桌面是根据桌面模板创建的.桌面模板包含了系统盘.有时系统盘的空间不满足需求,就需要对系统盘大小进行调整. 我们以Hype ...
- .NET 云原生架构师训练营(模块二 基础巩固 EF Core 查询)--学习笔记
2.4.5 EF Core -- 查询 关联数据加载 客户端与服务端运算 跟踪与不跟踪 复杂查询运算 原生 SQL 查询 全局查询筛选器 关联数据加载 学员和助教都在项目分组中,调整模型,删除 Ass ...
- CentOS7.5上卸载Oracle19c
最近遇到一个麻烦的事情,由于公司开发的数据库备份容灾系统,对于备份容灾的数据库必须使用LVM(pv.vg.lv),所以之前安装的Oracle19C 必须卸载掉,然后使用空白磁盘通过parted.fdi ...
- Linux--Vi编辑命令(跳到指定行、翻屏、缩进)
1.设置行号 如果编辑后,又想显示行号,同样操作按一下esc键,并输入:(冒号),输入set number ,并按回车键,完成后即显示行号. 不需要显示行号,同样操作按一下esc键,并输入:(冒 ...
- 基于keras的文本情感识别
情感识别是一个典型的分类问题,可以使用Keras来实现,本文是之前整理的笔记,分享出来大家一起学习. 流程描述 Keras文本情感分类基于机器学习算法,会根据大量数据训练出分类模型,然后使用训练好 ...
- CentOS7中搭建GitLab踩坑实录
今晚闲来无事,尝试了下自己搭建一台git服务器,很多人可能不明白平时自己随手就可以提交代码,为什么还要自己搭建服务器呢?首先你有没有考虑过你是怎么能把代码提交上去的?如果公司突然有一天需要你来负责搭建 ...
- MySQL专题2: 事务和锁
合集目录 MySQL专题2: 事务和锁 说说数据库事务特性及存在的问题 这属于数据库事务的基础概念了, 就是ACID Atomicity, 原子性, 事务包含的所有操作要么全部成功, 要么全部失败回滚 ...
- Java设计模式-命令模式Command
介绍 命令模式(Command Pattern):在软件设计中,我们经常需要向某些对象发送请求,但是并不知道请求的接收 者是谁,也不知道被请求的操作是哪个, 我们只需在程序运行时指定具体的请求接收者即 ...