一、安装
1、在guthub上下载包:
(内部)
2、自己选择一个文件夹放置下载之后的包,然后解压,在进入到文件所在目录,按住shift键+鼠标右键,点击“在此处打开命令窗口”
3、执行
$npm install 从npm公共区下载依赖
二、框架结构说明
1、build是打包时,命令行执行npm run build是运行的,其中webpack.base.conf.js 文件当中的
entry
: {
app
:
'./src/main.js'
}
,
是入口路径。
output
:
是出口,最后执行之后,会生成一个dist文件夹,刷新之后便可以看见,将这个文件夹放置在服务器上就可以。
2、config当中的index.js文件当中的
port
:
8888
, 和
host
:
'localhost'
, 分别是端口号与本机域名地址,可以修改,而在这里面
useEslint
:
true
, eslint代码规范是被启动的,这个特别要注意,代码的编写时,一定要按照规则进行,否则就会报错,而这样做的目的,便是规范大家,使得代码结构尽可能的一致。(常见的几个错误:1、必须使用驼峰法命名,2、在一个函数当中,轻易不要使用全局变量,var这个定义也慎重,尽量使用let来定义,这个是因为vue框架的原因,3、在加注释的时候//后面一定要加一个空格,:后面也是需要空格,前面不需要,4、代码段落对齐一定要仔细,否则也会报错,5、定义工具函数时,内部的函数引用要this.function(),6、==使用要换成===,但是要注意===是不能自动转换类型的 )
3、 node_modules当中是npm下载的依赖库,等会可以拿下载joint做师范(
npm install --save-dev jointjs),执行之后,在node_modules当中便能看到joint的文件夹,在package.json当中也能见到
"jointjs"
:
"^2.0.1"
, 在这个里面
devDependencies 是开发的依赖。
4、src这个是关键要主要讲:
1、assets当中放置的是静态资源,下级目录为两个font和img(推荐一个网址:
https://tinypng.com/
图片压缩网址,可以减少图片资源的占用量,进而降低项目大小,优化首屏渲染速度)
2、components是放置组件的,组件这个东西的编写看需求,但是一旦确定编写组件,一定要三思,一定是要多个地方复用时,才编写组件,组件太多也会出现问题,页面逻辑会变得复杂,其他人看不懂
3、router是路由,resolve异步加载,简单的说就是按需加载,而其中如果需要用到重定向与子路由,那就需要你们自己去学习了(重定向网
https://www.cnblogs.com/xumqfaith/p/7078557.html),
4、services很重要,是数据请求,axios当中有“
请求拦截器”和“
响应拦截器”在这两个拦截器当中,分别可以对数据进行处理,比如响应拦截器当中,对服务器返回的数据,可以进行一切修改,剔除一些无用的数据,默认请求的说明:
export default function
(url
,
{
// 不传时,默认参数
method =
'post'
,
timeout =
10000
,
data = {}
,
headers = {
'Content-Type'
:
'application/x-www-form-urlencoded;charset=UTF-8;'
}
,
// 可以扩展,扩展规则参考
http://tool.oschina.net/commons/
dataType =
'json'
// 若是上传其他类型的数据,需要进行重定义,如图片与文件上传时
}) {
const
config = {
method
: method
,
timeout
: timeout
,
url
: url
,
// 如果URL是完整的,包含域名,则下方的域名不会被拼接
baseURL
: baseUrl.
URL_CNODEJS
,
// 域名,在最外层的config.js当中可以修改,请求目标服务器域名配置,结合我们自己的项目,在项目放置到服务器上时,就是将域名替换成192.168.1.3
data
: data
,
headers
: headers
,
dataType
: dataType
}
;
return
axios(config)
;
}
在server.js 文件当中,进行统一的请求定义,下方为一个请求
getTopics
(data) {
// 调用请求方式 只是替换了method内部参数
return
axios
(
'api/v1/topics'
,
{
method
:
'get'
,
data
: data
// 穿入对象,当请求为post类型时传入
})
;
}
,
而使用这个请求的方式这是在view文件当中的pageMain.vue中
created
() {
// 生命周期函数,进入页面就加载数据
this
.
getTopicsFunc
()
;
}
,
// 接口调用,异步请求
getTopicsFunc
() {
// then成功
server.
getTopics
().
then
((res) => {
console
.
log
(res)
;
}).
catch
((err) => {
console
.
log
(err)
;
})
}
}
,
5、store(
https://vuex.vuejs.org/zh-cn/)是
状态管理模式,而在我们的项目当中,使用这个,是为了,及时动态的更新设备上的数据。
详细说明:
state,唯一数据源 ,需要多少便写多少个,而对象亦是可以新增,
const
state = {
userInfo
: {
name
:
'admin'
,
id
:
'0001'
},
userXX
: {
name
:
'kkk'
}
}
;
export default
state
;
getter.js获取数据
// 获取数据
const
getters = {
getUserInfo
(state) {
return
state.
userInfo
;
}
,
getXX
(state) {
return
state.
userXX
;
}
}
;
export default
getters
;
action.js改变数据
const
actions = {
changeUserInfo
(store
,
payload) {
// commit在vuex有文档,触发mutation
store.
commit
({
type
:
'changeUserInfo'
,
userInfo
: payload
})
}
,
changeUserXX
(store
,
payload) {
store.
commit
({
type
:
'changeUserXX'
,
userInfo
: payload
})
}
}
;
export default
actions
;
mutation.js实际进行状态更改的地方
// 修改数据,是同步请求
const
mutations = {
changeUserInfo
(state
,
payload) {
state.
userInfo
= payload.
userInfo
;
}
,
changeUserXX
(state
,
payload) {
state.
userXX
= payload.
userInfo
;
}
}
;
export default
mutations
;
使用的案列在pageMain.vue当中:
computed
: {
// 计算机属性
// 从getter.js当中获取函数
...mapGetters([
'getUserInfo'
,
'getXX'
])
}
,
methods
: {
// 修改数据, ...ES6的语法,
...mapActions([
'changeUserInfo'
,
// 定义了一个函数,需要几个写几个
'changeUserXX'
])
,
// vuex中state状态修改,点击事件
commitUserInfoFunc
() {
let userInfo = {
name
:
this
.
name
,
id
:
this
.
id
}
;
this
.
changeUserInfo
(userInfo)
;
// 调用上方'changeUserInfo'函数
}
,
6、utils放置工具函数,有既定的编写要求
// 工具函数
const
utils = {
具体的工具函数,案例参考时间转换函数
}
;
export default
utils
;
7、views当中放置具体的页面,一个页面设置一个文件夹,如:one{index.vue和style.css两个文件夹},vue框架如何引用外部JS(utils加入一个函数),CSS文件(@import引入就可以):在一个文件夹下,和不再一个文件夹下两种情况注意路径要写正确
三、其他注意点,或者说再次强调
1、.editorconfig文件是代码规范要求,如果存在这个文件,而不按照要求写,就会出现报错
2、config文件下的index文件当中,可以修改端口号
3、路由当中还有一个重定向的写法
4、外部js 要先按照格式导出,然后才能导入
5、npm run build --report 查看打包项目结构
6、assets 放置静态的资源
7、使用这套数据存储与修改,可以适用机房项目数据
8、vuex文档当中有对应的说明,方法不一,但是现在这种比较规整
9、utils当中放置工具函数,要有导出
10、eslint 编写规则,如果一旦不符合,那就会报错,查看错误修改
四、jQuery引入(
https://www.cnblogs.com/lxzltg/p/6004277.html)
1、
在webpack.dev.conf.js的module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
2、然后一定要重新npm run dev
3、在需要使用的地方引入
import $ from 'jquery'
import joint from 'jointjs'