vue移动端框架搭建
vue移动端框架搭建
vue官网： https://cn.vuejs.org/v2/api/#v-slot
一、安装各种包（-S表示项目需要，-D表示开发需要）
1.安装node.js , 安装git 使用git bash命令工具
2.安装cnpm cnpm的速度比npm快
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装脚手架：
cnpm install @vue/cli -g
4.创建项目：
vue create vue-study(项目名字)
cd vue-study 进入项目，在启动服务器
5.启动项目：进入项目目录，执行 npm run serve，启动一个本地开发服务器
(建议在package.json文件夹中的"scripts"配置"start":"npm run serve")
这样就能在不同的框架中使用同一个名称启动不同的项目。
关闭服务 ctrl+c
6.安装各种插件：
Element (组件)
cnpm i element-ui -S
官网： https://element.eleme.cn/#/zh-CN/component/quickstart
vant (组件)
有赞出品
Vant，是一个专注于移动的Vue UI组件库
官网： https://youzan.github.io/vant/#/zh-CN
cnpm install vant -S
cnpm install babel-plugin-import -D
配置babel.config.js 需要重启服务
plugins: [
[\'import\', {
libraryName: \'vant\',
libraryDirectory: \'es\',
style: true
}, \'vant\']
]
Vue
在html中直接引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue. js"></script>
脚手架中已有，import Vue from \'vue\' 引入即可
Vuex (状态管理)
cnpm install vuex -S
Sass (css组件，可以使css嵌套书写)
cnpm install sass-loader -D
cnpm install sass -D
axios (代理跨域)
npm install axios -S
创建vue.config.js
配置：// 每次修改都要重启服务器
module.exports = {
devServer:{
// 本地服务端口号（自定义端口号）
port:"8090",
// 当访问的路径有/jd就代理制 http://10.36.135.29:9999服务器
proxy:{
\'/jd\':{
target:"http://10.36.135.29:9999",//代理请求数据
ws:true,
changeOrigin:true
}
}
}
}
7.下载别人的代码时不要下载node_modules包，在项目中执行npm install 就可以下载相关的依赖包
二、创建路由
1.单页面应用程序 VS 多页面应用程序
单页面应用程序，实际是通过路由对组件进行管理的，url发生变化，组件切换，就形成了视觉上的切换
实际上就只有一个页面
2.安装集成路由(-S表示项目需要，-D表示开发需要)
cnpm install vue-router -S
3.在src目录下创建 router.js文件
编写以下代码：
// 引入vue
import Vue from \'vue\'
// 引入路由vue-router
import VueRouter from \'vue-router\'
// 创建路由
Vue.use(VueRouter)
// 引入组件
import Home from \'./views/Home.vue\'
const router = new VueRouter({
routes:[
// 当在url中出入/home时，显示Home.vue页面
{path:\'/home\',component:Home}
]
})
// 抛出去
export default router
4.在main.js中进行挂载
// 引入router,js文件
import router from \'./router,js\'
new Vue({
// 挂载
router,
render:h=>h(App)
}).$mount(\'#app\')
5.在App.vue中，通过router-link完成跳转链接
如：to:url跳转的名称 exact:名称高度匹配才跳转 tag:解析在html中是span标签 active-class:高亮显示
<router-link to=\'/home\' exact tag="span" active-class="on"></router-link>
6.通过<router-view>来展示url所匹配成功的组件
三、 项目中各个文件夹的作用
node_modules 用于存放各种安装的包，导入项目时不需要导入，在项目中 npm install就可以下载。
public 用于存放较大的图片
src/assets 用于存放小小的icon，小背景图(建议少用background)
src/components 用于存放页面中的内容人信息，如新闻
src/store 用于存放状态管理工具(自己创建，根据自己的需求)
src/utils 用于存放共享的数据，组件(自己创建)
src/views 用于存放vue文件(自己创建)
四、小知识点
1.编程路由跳转 this.$router.push()指定性跳转 / replace()指定性跳转 / back()跳转到上一页
2.路由传参
在router.js里配置路由
{ path:\'/detail/:id\',component:Detail }
在编程式路由跳转
this.$router.push(\'/detail/\'+id(要传的值))
在接受页面动态接收参数
this.$router.params.id(接受的值)
3.两种客户端的路由模式
mode=\'hash\'(默认)
缺点：URL中有#不好看
优点：部署到服务器上时，单页面刷新不会出现404
mode=\'history\'
优点：URL中没有#
缺点：部署到服务器上时，单页面刷新会出现404，解决方法是要求后端或运维在服务器（Nginx）上做重定向处理
4.路由懒加载
const Home = ()=>import(\'@/views/Home.vue\')
作用：应用程序组件异步加载，节省应用程序初始化的性能
结合Vue的异步组件和webpack的代码分割功能，实现组件的懒加载
五、状态管理
分别有四个函数
state:{} 共享数据的共享
getters:{} 相当是计算属性
mutations:{} 用来操作state
action:{}
1.action是vuex官方建议，与后端接口对接的入口
2.工作中，一般让那些被多个组件共享的后端数据，走action
3.在action中，可以直接修改state,但不推荐这样做，因为这样写Devtools不能监视（Devtools是用于查看vue的数据，状态信息）
// action是Vuex官方建议的，与后端接口对接的入口
// 工作中，一般让那些需要被多个组件共享的后端数据，走actions
// 在actions中，可能直接修改state，但是不推荐这么做
在src目录下建store文件夹，在里面创建index.js文件，在创建modules文件夹
index.js文件
test.js
详细看： https://github.com/jay267758 中的 wapapp
六、全局路由守卫（在router.js中配置）
router.beforeEach((to,from,next)=>{
console.log(to) // 当前要进入的目标路由
console.log(from) // 当前要离开的目标路由
console.log(next) // next实现跳转功能
// 判断token(是否登录)，实现页面是否显示
if(to.path === \'/cart\' || to.path === \'/user\'){ //要跳转到这两个页面
let token = localStorage.getItem("token")
if(token){ // 是否有token,有就跳转，没有跳到/login
next()
}else{
next("/login")
}
}else{
next()
}
})
以上是 vue移动端框架搭建 的全部内容， 来源链接： utcz.com/z/379412.html
