怎样使用 @vue/cli创建并开发一个项目
不想每次都去翻视频，所以自己记录下
文章适用范围：使用纯粹的JavaScript进行开发的Vue项目
安装@vue/cli
vue项目的构建需要一个npm包，这个包叫做 @vue/cli，
可以通过 vue --version 检查自己是否已经安装了这个npm包。
如果没有安装这个包，通过 npm install -g @vue/cli安装这个包。
新建项目
安装好之后就可以创建项目了
vue create
接下来会让我们选择需要的依赖，一般来说，vue版本选3.x，再勾选 babel，router和vuex即可。
然后 cd <project-name></project-name>，运行 npm run serve，就能让整个应用跑起来了。
引入element-plus
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
.
|-babel.config.js
|-package.json
|-package-lock.json
|-public
|-index.html
|-favicon.ico
|-src
|-App.vue # 根组件
|-main.js
|-assets # 存放静态资源
|-components # 存放组件
|-router # 页面路由
|-store # 项目变量
|-views # 视图
package.json
这是npm的配置文件
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build"
},
在serve后面加上 --open，这样执行 npm run serve时候，就可以自动打开浏览器
main.js和index.html
main.js中 createApp接收的参数来自 App.vue，挂载到了 public/index.html中 id为 app的 div中。
可以尝试修改 index.html，然后看看页面的变化。
把 App.vue里的style都删了，加上这样
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
封装axios
npm i axios -S安装axios
要使用的时候， import request from "@/utils/request";即可
使用request
如何使用request？
/*
@parm: url{string}
@parm: form{object}
*/
request.post(url, form);
/*
@param: url{string}
@param: params{object}
*/
request.get(url, params);
提供一个案例：
request
.get(/${this.search_type}, {
keyword: this.keyword,
})
.then((res) => {
console.log(res);
});
解决跨域
项目根目录新建 vue.config.js，将下面的内容复制粘贴进去。
// vue.config.js
// 跨域配置
module.exports = {
devServer: { //记住，别写错了devServer//设置本地默认端口 选填
port: 9876,
proxy: { //设置代理，必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
target: 'http://127.0.0.1:4523/m1/1706029-0-default', //代理的目标地址
changeOrigin: true, //是否设置同源，输入是的
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}
这里是 request.js，放在这里，方便后面的解释说明。
// src/ustils/request.js
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
...
根据上面几个链接，我讲解我的理解
比如请求 GET /user，
如何理解跨域
这个文件里，定义一个服务器，原理是这个服务器和Vue项目跑在一个端口下的，这样chrome就不会拦截http请求，但是这个端口本身是没有提供http服务的，所以请求会失败，然后就会转交给代理服务器处理，下面是黑马教程的解释，可以参考这个B站视频
'/api'的意思是’api’开头的请求使用代理服务器，pathRewrite是因为真正的后端url没有api这个字符子串。
通常，头部、侧边栏这些小部分可以作为组件
组件是一个.vue文件
组件定义
在 component里编写一个组件，起名叫做 Header.vue，内容如下：
export default {
name: 'Header',
}
关键在于 <script></code>里的 <code>export default</code></p><p>name属性就是给这组件起个名字，到时候在别的页面引入的时候就要用到这个名字</p><h2 id="导入组件">导入组件</h2><p>我们希望Header组件能够一直在整个项目的页面上方出现，所以我们把Header组件引入 <code>App.vue</code>。</p><p>import 语句中，@表示的是 <code>src</code>文件夹</p><pre><code class="language-vue"><template>
<br />
<Header></Header></p>
<p><router-view/>
</template></p>
<script>
import Header from '@/components/Header'
export default {
name: 'Layout',
components: {
Header,
},
}
</script>
<p>
script
import request from "@/utils/request";
export default {
name: "Home",
components: {},
data() {
return {
keyword: "",
search_type: "question",
radio: 1,
};
},
methods: {
search() {
request.post("/user", {}).then((res) => {
console.log(res);
});
},
},
};
把我们要的东西都写到 export default里面
如果是数据，就是在 data函数里return一个对象，这个对象的属性可以放到 <template></template>中
data() {
return obj;
}
如果是函数，就放到 methods这个对象里
Original: https://www.cnblogs.com/ticlab/p/16751532.html
Author: ticlab
Title: VueCLI使用
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/579370/
转载文章受原作者版权保护。转载请注明原作者出处！