一、配置准备环境
# 1.傻瓜式安装node:
官网下载:https://nodejs.org/zh-cn/
# 2.安装cnpm, 以后使用淘宝提供的cnpm即可, 速度快。
'''
查看看装是否成功版本: cnpm -v
可能出现的问题: 如果出现安装完毕以后提示‘不是内部或外部命令,也不是可运行的程序’
解决:
第一步: 查看你看装完毕以后的路径是否添加到了环境变量, 没有添加则添加
C:\Users\yang\AppData\Roaming\npm\cnpm
第二步: 重启你的命令终端
'''
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 3.安装vue最新脚手架
"""
查看安装是否成功, 输入vue出现提示: vue
"""
cnpm install -g @vue/cli
# 注:如果2、3步报错,清除缓存后重新走2、3步
npm cache clean --force
二、前台项目创建
1. 在命令行中输入命令创建项目
# 前提:在目标目录新建luffy文件夹
cd 建立的luffy文件夹
vue create luffycity # luffycity是项目名
2.命令行创建前台项目流程
第一步: 选择手动选择功能 -》 Manually select features
Vue CLI v4.4.6
? Please pick a preset:
default (babel, eslint) # 默认
> Manually select features # 手动选择功能(回车)
第二步:
# 提示: 空格选中, 回车确认
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel # 默认选中
( ) TypeScript
( ) Progressive Web App (PWA) Support
>(*) Router # 路由
(*) Vuex # 状态管理器
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
第三步:
CopyVue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? # ESLint, Babel存放的位置。 存放在 In package.json中一般
In dedicated config files
> In package.json
第四步:
Copy? Save this as a preset for future projects? (y/N) y # 将此保存为将来项目的预置(都行)
完成配置:
3. 使用vue/cli启动服务,使用图形化界面创建vue项目
Copy# 终端下输入命令:
vue ui
# 关闭
ctrl+c
三、目录介绍
├── luffycity
├── public/ # 项目共有资源
├── favicon.ico # 站点图标
└── index.html # 主页
├── src/ # 项目主应用,开发时的代码保存
├── assets/ # 前台静态资源总目录
├── css/ # 自定义css样式
└── global.css # 自定义全局样式
├── js/ # 自定义js样式
└── settings.js # 自定义配置文件
└── img/ # 前台图片资源
├── components/ # 小组件目录
├── views/ # 页面组件目录
├── App.vue # 入口脚本文件
├── router
└── index.js # 路由脚本文件
store
└── index.js # 仓库脚本文件
├── vue.config.js # 项目配置文件
└── *.* # 其他配置文件
四、文件修订
1. 保留以下文件的所示内容
- App.vue:根组件
<template>
<div id="app">
<router-view/>
</div>
</template>
- router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: HomeView
},
{
path: '/home',
redirect: '/',
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
- Home.vue
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'home',
components: {
},
}
</script>
2. 其它页面组件和小组件都删除
五、全局配置:全局样式及配置文件
1. 全局css
正常写前端项目,需要去掉所有标签的默认样式,css
第一步:在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
// 配置全局样式
// 使用全局css样式,只需要导入就会生效
import '@/assets/css/global.css'
2. 全局js
向后端发送请求,请求地址测试阶段 127.0.0.1:8000,但是后期上线,地址要变,如果在组件中把地址写死,以后上线的时候需要要改,每个都要改,很麻烦。所以写一个全局js,js中有个url地址,以后所有组件中发送请求时,都是用这个url地址
第一步:在assets目录下新建目录和文件js/settings.js
export default { BASE_URL:'http://127.0.0.1:8000/api/v1' }
第二步:在main.js中引入settings.js,把settings对象放入到vue的原型中
import settings from "@/assets/js/settings"; Vue.prototype.$settings = settings // 以后在所有需要与后台交互的组件中:this.$settings.BASE_URL+ '再拼接具体后台路由'
第三步:在任意组件中使用
this.$settings.BASE_URL this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{ })
六、启动项目相关配置
1.点击编辑配置按钮
2. 命令行输入
npm run serve
七. 拓展
1. node_modules文件夹被删除或者出问题解决方法
npm install
标签:vue,settings,样式,创建,前端,js,luffy,全局,css
From: https://www.cnblogs.com/chen-ao666/p/17164569.html