一、使用vue创建项目的详细步骤

B站黑马头条管理系统

一、前言

1、本例环境

node.js：v12.16.1
npm：6.13.4
vue：@vue/cli 4.5.8

环境自己百度下载搭建

二、创建vue项目

注意：不要使用 Git Bash 执行项目创建操作，使用 cmd 或者 powershell 之类的工具。

如果你还没有安装 VueCLI，或者版本低于 4，请执行下面的命令安装或是升级：
npm install --global @vue/cli

在命令行中输入以下命令创建 Vue 项目：

vue create 【项目名】

Vue CLI v4.2.3
? Please pick a preset:default (babel, eslint)
> Manually select features

default：默认勾选 babel、eslint，回车之后直接进入装包

manually：自定义勾选特性配置，选择完毕之后，才会进入装包

选择第 2 种：手动选择特性，支持更多自定义选项

? 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

分别选择：
Babel：es6 转 es5
Router：路由
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验，ESLint 代码格式校验

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

是否使用 history 路由模式，这里输入 n 不使用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)
> LessStylus

选择 CSS 预处理器，这里选择我们熟悉的 Less

? Pick a linter / formatter config:ESLint with error prevention onlyESLint + Airbnb config
> ESLint + Standard configESLint + Prettier

选择校验工具，这里选择 ESLint + Standard config

? Pick additional lint features:(*) Lint on save
>(*) Lint and fix on commit

选择在什么时机下触发代码格式校验：

Lint on save：每当保存文件的时候

Lint and fix on commit：每当执行 git commit 提交的时候

这里建议两个都选上，更严谨。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json

Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

In dedicated config files：分别保存到单独的配置文件

In package.json：保存到 package.json 文件中

这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

? Save this as a preset for future projects? (y/N) N

这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。

✨  Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...[          ........] - extract:object-keys: sill extract json5@2.1.1

向导配置结束，开始装包。
安装包的时间可能较长，请耐心等待…

⚓  Running completion hooks...�  Generating README.md...�  Successfully created project topline-m-89.
�  Get started with the following commands:$ cd topline-m$ npm run serve

安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

# 进入你的项目目录
cd 【项目目录】# 启动开发服务
npm run serve

 DONE  Compiled successfully in 7527msApp running at:- Local:   http://localhost:8080/- Network: http://192.168.10.216:8080/Note that the development build is not optimized.To create a production build, run npm run build.

启动成功，命令行中输出项目的 http 访问地址。
打开浏览器，输入其中任何一个地址进行访问。

如果能看到该页面，恭喜你，项目创建成功了。

调整初始目录结构

这里主要就是下面的两个工作：

删除初始化的默认文件
新增调整我们需要的目录结构

1、将 App.vue 修改为：

<template><div id="app"><h1>System发布系统</h1><!-- 路由出口 --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style lang="less"></style>

2、将 router/index.js 修改为：

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)// 路由配置表
const routes = []const router = new VueRouter({routes
})export default router

3、删除默认生成的不相关文件：

src/views/About.vue
src/views/Home.vue
src/components/HelloWorld.vue
src/assets/logo.png

4、增加以下几个目录

src/api 目录
- 存储接口模块
src/utils 目录
- 存储一些工具模块
src/styles 目录
- index.less 文件，设置全局样式
- 在 main.js 中加载全局样式 import './styles/index.less'

调整之后的目录结构如下。

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src                           ├── api├── App.vue                   ├── assets                    ├── components                ├── main.js                   ├── router├── utils├── styles               └── views

Element 组件库

Element 介绍

Element 是饿了么前端团队开发的一个基于 Vue.js 的桌面端组件库，它提供的组件非常丰富，不仅功能强大，而且简单易用。

Element 非常的流行，大多数基于 Vue.js 开发的管理系统都会使用到它。

官网：https://element.eleme.io/
GitHub 仓库：https://github.com/ElemeFE/element
- 目前已有 44.8k 的 Star 了

导入到项目中

1、安装

npm i element-ui

2、在 main.js 中配置 element 组件库

/*** 项目的启动入口*/import Vue from 'vue'
import App from './App.vue'
import router from './router'// 加载 element 组件库
import ElementUI from 'element-ui'// 加载 element 组件库的样式
import 'element-ui/lib/theme-chalk/index.css'// 加载全局样式文件
import './styles/index.less'// 全局注册 element 组件库
Vue.use(ElementUI)Vue.config.productionTip = false// 创建 Vue 根实例
// 把 router 配置到根实例中
// 通过 render 方法把 App 根组件渲染到 #app 入口节点
new Vue({router,render: h => h(App)// el: '#app' // 等价于 $mount('#app')
}).$mount('#app')

使用说明

用哪个组件就看哪个组件的说明文档。

复制 -> 粘贴 -> try-try-see。

封装请求模块

为了方便，我们在这里把 axios 单独封装一个模块用于项目中的请求操作。

/*** 基于 axios 封装的请求模块*/
import axios from 'axios'// axios()
// axios.get()
// axios.post()// 创建一个 axios 实例，说白了就是复制了一个 axios
// 我们通过这个实例去发请求，把需要的配置配置给这个实例来处理
const request = axios.create({baseURL: '127.0.0.1:80' // 请求的基础路径，自己后台服务的地址
})// 请求拦截器// 响应拦截器// 导出请求方法
export default request// 谁要使用谁就加载 request 模块
// import request from 'request.js'
// request.xxx
// request({//   method: ,
//   url: ''
// })

一、使用vue创建项目的详细步骤相关推荐

vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
如何使用vue-cli来搭建vue项目？详细步骤跟着我来吧！
目录一.什么是vue-cli? 二.前提:搭建好NodeJS环境安装vue-cli 三.使用脚手架vue-cli(2.X版)来构建项目第一步第二步第三步第三步第四步三.SPA完成路由的 ...
vue如何新建一个项目（详细步骤）
vue创建项目一.安装node环境与npm 1.首先:先从https://nodejs.org/en/中下载node.js 按照提示一直点next,直到Finish完成安装 2.打开控制命令程序cm ...
Vue CLI安装的详细步骤
Vue CLI安装的详细步骤为了以后安装方便,写一个具体的步骤. 1.首先,打开vue官网,在生态系统的工具里找到Vue CLI,点击安装,先全局安装,直接打开cmd命令,执行以下命令.(我选的第一 ...
Railway Dashboard部署PHP苹果CMS项目的详细步骤
Railway Dashboard部署PHP苹果CMS项目的详细步骤目录 Railway Dashboard部署PHP苹果CMS项目的详细步骤 1.准备项目文件: 2.创建Dockerfile: 3 ...
从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。从头开始。...
从头开始vue创建项目 Do you ever read an article on Medium (or elsewhere) about passive income, side projects ...
Hive创建外部表详细步骤
Hive创建外部表详细步骤一.创建外部表二.hdfs建立文件夹存放数据三.准备数据四.上传数据到HDFS目录五.Hive表关联文件得到数据六.查询数据一.创建外部表 create ext ...
vue创建项目报错command not found:create-webpack
vue创建项目报错command not found:create-webpack vue创建项目报错command not found:create-webpack,请不要怀疑,是你创建项目命令写错 ...
Vscode创建vue项目的详细步骤
目录一.概述操作的前提二.操作步骤一.概述后端人员想在IDEA里面创建一个Vue的项目,但是这非常麻烦,用vscode这个前端专用软件创建就会非常快速. 操作的前提 1.安装vscode软件 ...