一、安装
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'