Vue框架学习(3)--项目初始化操作
项目初始化demo
如果需要修改项目启动的ip和端口，修改方式：
来到 "node_modules/@vue/cli-service/lib/commands/serve.js" 在host:'0.0.0.0'后面修改为‘127.0.0.1’
设置启动服务时浏览器自动打开
在package.json文件中 serve后面加上 --open
即：
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
关闭eslint校验工具 （可能项目已经默认添加)
创建vue.config.js文件：需要对外暴露
module.exports = {
lintOnSave:false,
}
src文件夹的别名的设置（可能项目已经默认添加)
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
ps: 跨域问题在后端配置，前端不用处理
启动服务
通过命令窗口来到对应项目的根目录下，然后在输入：npm run serve
安装&卸载包
npm install 包名 --force
npm remove 包名
删掉项目自带的边距
style="margin:0"
main.js文件
app调整成变量形式：
let app =createApp(App)
app.use(ElementPlus).use(index).mount('#app')
路由跳转
# 安装包
npm install vue-router
<router-view></router-view>
<span class="all_top_login"><router-link to="/login">登录</router-link></span>
this.$router.push('/')
// 定时跳转
setTimeout(() => {
this.$router.push("/");
}, 10000);
设置cookie
# 使用npm安装
npm install vue-cookies --save
在 main.js 中引入并注册插件：
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
# 设置cookie，有效期1小时,设置15天为 "15d"
this.$cookies.set("username", response.data.userinfo.username, "1h")
# 获取cookie
this.username = this.$cookies.get("username")
# 删除cookie
this.$cookies.remove("username")
解决强制刷新，页面出现404
nginx文件
server {
listen 80; # 端口号
server_name _;
root /home/dist; # dist文件夹的路径
index index.html;
try_files $uri $uri/ /index.html; # 解決Vue强制刷新404问题
}
关闭项目初始化设置的边距
修改 public/index.html文件
在body设置边距为0
<body style="margin:0;background-color: #f2f2f2;">
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。
文章标题:Vue框架学习(3)--项目初始化操作
本文作者:伟生
发布时间:2023-04-01, 19:23:00
最后更新:2024-03-07, 22:41:45
原始链接:http://yoursite.com/2023/04/01/qianduan_04_vue_study_3_project_init/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。
