Luffy 前台搭建_lufeicity-CSDN博客

一：创建项目

1.创建vue项目
注意：这里的项目名只能全部小写
vue create luffycity
2.剩余创建步骤
注意：先看这里！

创建项目的时候，如果觉得自己代码写得很规范的，可以开启ESLint
如果是刚开始接触Vue，建议在项目创建的时候，不要开启ESLint
开启了ESLint，就相当于开启了严格模式，以下情况都会报错：

多1个,
多1个空格
缩进不正确
存在：已经导入但未被使用的组件
etc…
具体创建步骤：看以前博客

二：配置
1.目录结构

2.文件解析

① App.vue（初始）
复制代码

Home | About

复制代码
Home这个相当于a链接

不同之处：

因为Vue是单页面开发，router-link只会在组件之间来回切换
a链接会跳转到其他页面

② src/router/index.js（初始）
复制代码
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import Home from ‘…/views/Home.vue’ // 导入Home组件

Vue.use(VueRouter)

const routes = [
{
path: ‘/’, // 设置跟路由路径：/
name: ‘Home’,
component: Home // 跟路由组件为Home
},
{
path: ‘/about’,
name: ‘About’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
}
]

const router = new VueRouter({
mode: ‘history’,
base: process.env.BASE_URL,
routes
})

export default router
复制代码
③ src/main.js
整个项目的入口js文件
这是1个很重要的配置文件
配置了根组件、路由跳转
可以全局导入CSS、JS
导入的CSS和JS可以来自assets，也可以来自node_modules（推荐）
复制代码
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’)
复制代码
3.目录配置

目录文件修改
在src的assets下创建css、js、img文件夹
删除src的components下的所有文件

4.安装、导入配置
以下安装，如果用npm觉得速度慢的，可以用cnpm安装

① 配置全局初始化CSS样式
在src/assets/css下创建global.css，输入如下代码
复制代码
/* 声明全局样式和项目的初始化样式 */
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; /* 合并边框 */
}
复制代码
配置：main.js
// 使用 global.css
import ‘./assets/css/global.css’
② Axios - 用于前后端交互
安装
npm install axios
配置：main.js
// Axios 配置
import axios from ‘axios’
Vue.prototype. $a x i o s = a x i o s; ③ v u e - c o o k i e s 安装 n p m i n s t a l l v u e - c o o k i e s 配置： m a i n . j s / / v u e - c o o k i e 配置 i m p o r t c o o k i e s f r o m^{'} v u e - c o o k i e s^{'} V u e . p r o t o t y p e .$ cookies = cookies
④ Element UI - 饿了么团队开发的 1个好看的基于Vue的UI
安装
cnpm install element-ui
配置：main.js
// ElementUI 配置
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
⑤ JQuery
Vue不推荐使用JQuery，所以引用的方式和其他的不大一样