1.真正vue开发是需要脚手架来创建vue项目的
2.安装node,内包含npm(包管理工具)
3.在命令行安装nrm(镜像源):npm install nrm -g ;
使用taobao镜像,在下载依赖包速度会快一点,nrm use taobao
4.安装脚手架:npm install -g @vue/cli || 安装指定版本:npm install @vue/cli@版本号
5.vue项目的创建
在VScode里:Ctrl + ~ 进入控制台;
切换到自己想创建的目录:
eg:
PS D:\koa\vue3.0> cd vue-3
PS D:\koa\vue3.0\vue-3> cd vue21
PS D:\koa\vue3.0\vue-3\vue21> vue create 项目名
6.vue 需要使用axios发送ajax请求
-安装axios:npm install axios --save
-axios发送ajax请求的封装
import axios from 'axios'
const instance = axios.create({
baseURL: '接口地址',
timeout: 10000
})
const get = (url, params = {}) => {
return new Promise((resolve, reject) => {
instance.get(url, { params }).then((response) => {
resolve(response.data)
}, err => {
reject(err)
})
})
}
const post = (url, data = {}) => {
return new Promise((resolve, reject) => {
instance.post(url, data, {
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
resolve(response.data)
}, err => {
reject(err)
})
})
}
export { post, get }
7.统一css在不同浏览器的样式差异插件:npm install normalize.css --save
8.不同设备的展示适配
public-->index.html:
<script>
//检测当前设备的屏幕宽度
var width = document.documentElement.clientWidth || document.body.clientWidth;
// 按比例进行适配
var ratio = width / 375;
// 计算当前设备的html的font-size的大小
var fontSize = 100 * ratio;
// 设置当前设备的html的font-size的字体大小
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
</script>
9.项目上线
-在项目目录下新建vue.config.js文件
module.exports = {
publicPath: './项目名字'
}
-在项目的目录下执行 npm run build 命令,会调用webpack进行打包,
打包在了dist文件下,dist文件下的代码就是上
线的代码。
更多推荐
You辉编程_用vue3.0开发移动app的流程
发布评论