一：创建项目
1.创建vue项目
注意：这里的项目名只能全部小写
vue create luffycity
2.剩余创建步骤
注意：先看这里！
- 创建项目的时候，如果
觉得自己代码写得很规范的，可以开启ESLint- 如果是
刚开始接触Vue，建议在项目创建的时候，不要开启ESLint开启了ESLint，就相当于开启了严格模式，以下情况都会报错：
- 多1个
,- 多1个
空格缩进不正确- 存在：
已经导入 但未被使用的组件- etc...
具体创建步骤：看以前博客
二：配置
1.目录结构
2.文件解析
① App.vue（初始）
<template> <div id="app"> <div id="nav"> <!-- 路由跳转到根组件 --> <router-link to="/">Home</router-link> | <!-- 路由跳转到about组件 --> <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style> <!-- 这里编写CSS代码 --> ... </style> <script> // 这里编写JS代码 ... </script>
<router-link to="/">Home</router-link>这个相当于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.$axios = axios;
③ vue-cookies
安装
npm install vue-cookies
配置：main.js
// vue-cookie 配置 import cookies from 'vue-cookies' Vue.prototype.$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，所以引用的方式和其他的不大一样
安装
npm install jquery
在项目根路径下创建：vue.config.js
const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", "window.$": "jquery", Popper: ["popper.js", "default"] }) ] } };
⑥ Bootstrap
安装
npm install bootstrap
配置：main.js
// Bootstrap 配置 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css'
⑦ 配置全局自定义设置
在src/assets/js下创建settings.js，输入如下代码
export default { base_url: 'http://127.0.0.1:8000' }
配置：main.js
// 配置全局自定义设置 import settings from './assets/js/settings' Vue.prototype.$settings = settings;
在所有需要与后台交互的组件中：
this.$settings.base_url + '再拼接具体后台路由'把
settings赋值给了Vue.prototype.$settings，以后this.$settings.base_url可以直接拿到127.0.0.1:8000
5.整体main.js配置（无注释）
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import './assets/css/global.css' import settings from './assets/js/settings' import axios from 'axios' import cookies from 'vue-cookies' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' Vue.prototype.$settings = settings Vue.prototype.$cookies = cookies; Vue.prototype.$axios = axios; Vue.config.productionTip = false Vue.use(ElementUI); new Vue({ router, store, render: h => h(App) }).$mount('#app')