前台
vue环境
1
2
3
4
5
6
7
8
9
10
11
|
1.傻瓜式安装node:
官网下载：https://nodejs.org/zh-cn/
2.安装cnpm:
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue最新脚手架:
>: cnpm install -g @vue/cli
注：如果2、3步报错，清除缓存后重新走2、3步
>: npm cache clean --force
|
创建项目
1
2
3
4
5
|
"""
前提：在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: vue create luffycity
"""
|
启动前台项目
npm run serve
网络经验一:
在终端窗口不能输入命令或命令函数无法识别的解决办法。
只要右键vscode图标，兼容性选卡里设置以管理员身份执行就一切正常了。
操作：在vscode的快捷键图标右键 属性，打开“兼容性”标签，勾选"以管理员身份运行此程序" 即可，然后再重启vscode,就恢复正常了。
如果还不行，需要重启一下电脑才行（我的最终是重启一下电脑才可以的）。
如果vscode提示vscode 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，则要先安装好node.js即可。
重构项目目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
"""
├── luffycity
├── public/ # 项目共有资源
├── favicon.ico # 站点图标
└── index.html # 主页
├── src/ # 项目主应用，开发时的代码保存
├── assets/ # 前台静态资源总目录
├── css/ # 自定义css样式
└── global.css # 自定义全局样式
├── js/ # 自定义js样式
└── settings.js # 自定义配置文件
└── img/ # 前台图片资源
├── components/ # 小组件目录
├── views/ # 页面组件目录
├── App.vue # 根组件
├── main.js # 入口脚本文件
├── router
└── index.js # 路由脚本文件
store
└── index.js # 仓库脚本文件
├── vue.config.js # 项目配置文件
└── *.* # 其他配置文件
"""
|
文件修订：目录中非配置文件的多余文件可以移除
App.vue
1
2
3
4
5
|
<template>
<div id="app">
<router-view/>
</div>
</template>
|
router/index.js
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
|
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: '/home',
redirect: '/',
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
|
Home.vue
1
2
3
4
5
6
7
8
9
10
11
12
|
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'home',
components: {
},
}
</script>
|
全局配置：全局样式、配置文件
global.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
table {
border-collapse: collapse;
}
|
settings.js
1
2
3
|
export default {
base_url: 'http://127.0.0.1:8000'
}
|
main.js
1
2
3
4
5
6
7
|
import '@/assets/css/global.css'
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
|
