Vue入门(三)—— vue项目初始化配置
使用vscode或hbuilderx等ide打开创建好的项目:结构如下在src中:app.vue 是所有组件的跟组件main.js 是项目的打包入口文件router.js 是路由配置文件上面都是废话,了解一下就行,接下来开始自定义配置。一.启动项目时采用指定端口,并自动打开浏览器1.在项目根目录创建文件vue.config.js2.写入如下代码:module.exports ...
使用vscode或hbuilderx等ide打开创建好的项目:
结构如下
在src中:
app.vue 是所有组件的跟组件
main.js 是项目的打包入口文件
router.js 是路由配置文件
上面都是废话,了解一下就行,接下来开始自定义配置。
一.启动项目时采用指定端口,并自动打开浏览器
1.在项目根目录创建文件vue.config.js
2.写入如下代码:
module.exports = {
devServer: {
// 自动打开浏览器
open: true,
port: 8888
}
}
3.命令行启动:
npm run serve
这样就会在8888端口启动项目并自动在浏览器打开。
二.配置elementUI库
1.安装插件,打开图形界面工具,搜索插件 vue-cli-plugin-element 并安装,配置插件为按需导入,然后点击完成安装
2.导入资源,进入项目的main.js,增加如下代码:
// UI库
import './plugins/element.js'
导入完毕
三.配置axios依赖
1.安装依赖,打开图形界面工具,在“运行依赖”中搜索 axios 并安装
安装完毕
四.托管到码云或github
1.首次托管时进行全局配置
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
2.找到你的项目跟目录,打开命令行,输入如下命令
git status
git add .
git commit -m "add files"
git status
git remote add origin 你的仓库地址
git push -u origin master
这样就把你的项目托管到云端了
五.删除项目多余的部分
1.清空app.vue中的基本代码,保留如下结构
<template>
<div id="app">
app.vue组件
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</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.删除views目录
4.删除components目录下的HelloWorld.vue
清理完毕,项目干净了
接下来就可以正式开发项目了
更多推荐
所有评论(0)