6、luffy前端搭建Vue

前台

环境

"""
1.傻瓜式安装node: https://nodejs.org/zh-cn/
2.安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue/cli 3.x: cnpm install -g @vue/cli
4.如果报错处理后重新走2、3步：npm cache clean --force

>:如果已经有node环境，直接装本地依赖：npm install  --save
"""

创建项目

"""
前提：在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: vue create luffycity
"""

重构项目目录

"""
├── luffycity
	├── public/          			# 项目共有资源
	│    ├── favicon.ico			# 站点图标
	│    ├── index.html				# 主页
    ├── src/      					# 项目主应用，开发时的代码保存
    │    ├── assets/      			# 前台静态资源总目录
    │    │    ├── css/				# 自定义css样式
    │    │    │    ├── global.css	# 自定义全局样式
    │    │    ├── js/				# 自定义js样式
    │    │    ├── img/				# 前台图片资源
    │    ├── components/    		# 小组件目录
    │    ├── views/  				# 页面组件目录
    │    ├── App.vue	    		# 根路由
    │    ├── main.js	    		# 入口脚本文件
    │    ├── router.js	    		# 路由脚本文件
    │    ├── settings.js			# 自定义配置文件
    │    ├── store.js	    		# 仓库基本文件
    └── vue.config.js	    		# 全局配置文件
"""

配置开发环境

"""
1.在main.js中配置全局样式与设置：
import "@/assets/css/global.css";
import settings from "@/settings"
Vue.prototype.$settings = settings;

2.在前端项目目录下安装element-ui
>: cnpm install element-ui --save

3.在main.js中配置element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
"""