首页 > 其他分享 >luffy前端项目创建及配置

luffy前端项目创建及配置

时间:2023-02-28 15:57:00浏览次数:49  
标签:vue settings 样式 创建 前端 js luffy 全局 css

一、配置准备环境

# 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是项目名

img

img

2.命令行创建前台项目流程

第一步: 选择手动选择功能 -》 Manually select features

Vue CLI v4.4.6
? Please pick a preset:
  default (babel, eslint)   # 默认
> Manually select features  # 手动选择功能(回车)

image-20200716222658190

第二步:

# 提示: 空格选中, 回车确认
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

image-20200716222934000

第三步:

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

image-20200716223135263

第四步:

Copy? Save this as a preset for future projects? (y/N) y   # 将此保存为将来项目的预置(都行)

完成配置:

image-20200716223446986

3. 使用vue/cli启动服务,使用图形化界面创建vue项目

Copy# 终端下输入命令:
vue ui

# 关闭
ctrl+c

image-20200716221923157

image-20200716221941558

三、目录介绍

├── 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.点击编辑配置按钮

image-20210507185006640

image-20210507185131504

image-20210507185239768

2. 命令行输入

npm run serve

. 拓展

1. node_modules文件夹被删除或者出问题解决方法

npm install
 

标签:vue,settings,样式,创建,前端,js,luffy,全局,css
From: https://www.cnblogs.com/chen-ao666/p/17164569.html

相关文章

  • luffy项目
    luffy项目luffy介绍暂不介绍项目搭建虚拟环境虚拟环境的创建和使用可以参考项目搭建之虚拟环境,其内部所写的是python3.3版本后内置的venv功能搭建虚拟环境,而如果需要......
  • 路飞项目前端配置
    目录路飞项目前端配置一,前端设置全局css,js全局css全局js二,安装axios三,安装vue-cookies四,安装elementui路飞项目前端配置一,前端设置全局css,js清理出一个干净的项目全......
  • 拥抱下一代前端工具链-Vue老项目迁移Vite探索
    作者:京东物流邓道远背景描述随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换......
  • 安装node并创建vue项目
    1.多版本管理工具 nvmhttps://github.com/coreybutler/nvm-windows/releasesnvm-setup.zip2.打开nvm文件夹下的settings.txt文件node_mirror:https://npm.taobao......
  • 前端页面查看pdf,后端数据返回blob;blob与json格式转换
    <a-drawertitle="查看报告"width="520":closable="false":visible="visible"@update:visible="updateVisible"@close="close"......
  • 标量函数的创建和使用
     --createfunction标量函数名--(--入参入参类型--)--return出参类型--as--Begin--语句处理--end--案例createfunctionGetCodeByName(@Namevarcha......
  • 前端技术之HTML-介绍和目标
    HTML可以让我们实现静态页面效果,掌握绘制静态页面所需的各种知识点,了解前端体系方向,为后续深入打下基础。课程通俗易懂,理论结合实战,课堂感染力丰富,轻松掌握必会标签,真正做到......
  • 前端技术之HTML-介绍和目标
    HTML可以让我们实现静态页面效果,掌握绘制静态页面所需的各种知识点,了解前端体系方向,为后续深入打下基础。课程通俗易懂,理论结合实战,课堂感染力丰富,轻松掌握必会标签,真正做到......
  • 前端技术之HTML-介绍和目标
    HTML可以让我们实现静态页面效果,掌握绘制静态页面所需的各种知识点,了解前端体系方向,为后续深入打下基础。课程通俗易懂,理论结合实战,课堂感染力丰富,轻松掌握必会标签,真正做......
  • 前端技术之HTML-介绍和目标
    HTML可以让我们实现静态页面效果,掌握绘制静态页面所需的各种知识点,了解前端体系方向,为后续深入打下基础。课程通俗易懂,理论结合实战,课堂感染力丰富,轻松掌握必会标签,真正做......