构建实用VUE3项目

还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。

1、自然是将VUE-CLI升级到最新版本啦（卸载旧的，安装zhui新的）

npm uninstall -g vue-cli

npm install -g @vue/cli

你要是想看看脚手架的版本，那敲这个

vue --version

2、构建你的项目吧

vue create myproject

进入配置的时候问你愿不愿意，你打YES就好

还有就是，既然想要VUE3的，记得选VUE3就好

到了这儿，一个原始的项目就有啦。

3、在项目目录中，建一个名叫vueconfigjs的文件，并且在这个文件里导出一个对象。至于这个对象里的选项和配的值，那就又可以写一篇了

4、配置路由（和子路由）

1）安装好路由插件     cnpm i vue-router@next -D

2）在src目录下创建 router/indexjs 

3）在根目录的mainjs里面引入路由  import router from '/router'

4)   在Vue对象中加入router的配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from '/views/Loginvue'

Vueuse(VueRouter)

  const routes = [

  {

    path: '/',

    redirect: '/login'

  },

  {

    path: '/login',

    name: 'Login',

    component: Login

  },

  {

    path: '/',

    component: resolve => require(['/views/Indexvue'], resolve),

    redirect: '/home',

    children: [

      {

        path: 'home',

        name: 'home',

        component: resolve => require(['/views/home/Homevue'], resolve),

        meta: { title: '首页'}

      },

      {

        path: '/programCard',

        name: 'programCard',

        component: resolve => require(['/views/programCard/cardvue'], resolve),

        meta: { title: '路由1'}

      }

    ]

  }

]

const router = new VueRouter({

  mode: 'hash',

  base: processenvBASE_URL,

  routes

})

export default router

5、安装VUEX并使用

1)安装vuex  cnpm i  vuex@next -D

2）在src目录下创建 store/indexjs 

3）在根目录的mainjs里面引入  import store from '/store'

4)   在mainjs里加入store的配置

6、配置axios

1)   安装vuex  cnpm i  axios@next -D

2)   在src目录建立api/requestjs,并在其中引入axios       import axios  from 'axios'

在requestjs中创建axios实例

添加请求拦截器和响应拦截器

再将实例导出export

3)在src目录建立api/indexjs,引用axios实例，并统一定义请求函数

7、在src下建立views目录和路由子目录home/Homevue

8、在assets目录增加css 、iconfont、images、js目录，存放资源

9、根目录下建立static\globaljs

定义常量 const API_ROOT='127001:8081'

建立对象windowglobal={

url:{

apiUrl:">

vue的钩子函数:

beforeCreat: 创建前

created: 创建

beforeMount: 挂载前

mounted: 挂载

beforeupdate: 更改前

updated: 更改

beforeDestroy: 销毁前

destroyed: 销毁

小程序的钩子函数:

onLoad: 页面加载

onShow: 页面显示

onReady: 页面初次渲染完成

onHide: 页面隐藏

onUnload: 页面卸载

vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据

vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：

小程序绑定某个变量的值为元素属性时，会用两个大括号括起来

vue使用v-if 和v-show控制元素的显示和隐藏

小程序使用wx-if和hidden控制元素的显示和隐藏

vue使用v-on:event绑定事件，或者使用@event绑定事件，@eventstop阻止事件冒泡

小程序用bindtap(bind+event)，或者catchtap(catch+event)绑定事件，阻止事件冒泡

vue中如下:

小程序中如下：

vue中的表单元素上加v-model，然后再绑定data中对应的值

小程序中通过thissetData({key:value})将表单上的值赋值给data中的对应值

vue中需要在触发事件的方法中，把需要传递的数据作为形参传入

小程序中需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过ecurrentTargetdataset的方式获取，从而完成参数传递

检查是否安装成功

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

1、build：构建脚本目录

1）buildjs ==> 生产环境构建脚本；

2）check-versionsjs ==> 检查npm，nodejs版本；

3）utilsjs ==> 构建相关工具方法；

4）vue-loaderconfjs ==> 配置了css加载器以及编译css之后自动添加前缀；

5）webpackbaseconfjs ==> webpack基本配置；

6）webpackdevconfjs ==> webpack开发环境配置；

7）webpackprodconfjs ==> webpack生产环境配置；

2、config：项目配置

1）devenvjs ==> 开发环境变量；

2）indexjs ==> 项目配置文件；

3）prodenvjs ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在indexjs里面；

4）Appvue：根组件；

5）mainjs：入口js文件；

5、static：静态资源目录，如、字体等。不会被webpack构建

6、indexhtml：首页入口文件，可以添加一些 meta 信息等

7、packagejson：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、READMEmd：项目的说明文档，markdown 格式

9、xxxx文件：这些是一些配置文件，包括语法配置，git配置等

1解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。

改完之后重启一下即可。

2为了避免端口冲突，也可以修改port，打开目录同上

更改成功：

1 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过

npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)

2全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

3全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init

4可以进行创建项目了

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

3版本不同 安装方式也不同

vue-cli2: 命令 npm install -g vue-cli

vue-cli3: 命令 npm install -g @vue/cli

3版本不同的创建项目方式不同

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

4vue-cli2和vue-cli3 安装完后的 项目目录不一样

5安装指定版本的vue

npm install -g @vue/ cli@3121

vue-cli30项目目录结构

vue-cli20项目目录结构

vue-cli4515 的vue2项目目录

以上就是关于构建实用VUE3项目全部的内容，包括:构建实用VUE3项目、基于 VueCLI 搭建自己的 vue 项目脚手架、vue和小程序的比较等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！