当前位置:   article > 正文

前端项目搭建的几种方法

前端项目搭建

方法一:vue-cli 项目搭建

1.首先要安装node.js版本,根据项目需求安装对应版本,下载地址:Index of /docs/https://nodejs.org/docs/2.安装vue-cli,打开cmd窗口输入:npm install -g @vue/cli;查看是否安装,打开cmd窗口输入:vue -V(V必须是大写)

3.创建vue项目,会在当前目录创建:vue create 项目名

4.安装路由vue-router:npm i vue-router@3.5.2 -S;

在src目录下创建router目录,并在router目录下创建index.js文件和module目录,在module目录下创建home.js和index.js。

index.js初始化如下的代码

在 src/main.js 入口文件中,导入并挂载路由模块

在 src/App.vue 组件中,使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符

  在 src/router/index.js 路由模块中,通过 routes 数组声明路由的匹配规则

2.vuex的安装、配置与使用

(1)安装vuex:npm install vuex@3.6.2 -S

(2)vuex的流程

详情: 【vue2】vuex的安装、配置与使用_vue2安装vuex_泉城清晨的晚风的博客-CSDN博客使用vuex可以实现数据的共享。vscode中新建终端安装vuex。由于vue2不能使用vuex4的版本,所以在安装时需要指定版本3三、vuex工作流vuex核心包括actions、mutations、state。①state用来存储数据;②actions用来响应组件的事件,也可以对数据进行加工,或者进行后端请求,也就是说组件中调用dispatch方法,可以触发actions中的方法;③mutations用来操作state,actions中调用commit方法来调用mutations。④其他:当不https://blog.csdn.net/weixin_44431073/article/details/1250972843.axios安装:npm install -s axios

在\src\assets静态资源文件夹下创建axios配置文件

 页面引入

入参方法:

 4.拦截器

方法二:webpack搭建vue项目

1.首先安装vue-cli:npm install -g vue-cli 检查是否安装:vue -V

2.然后安装webpack:npm install webpack -g或npm install -g webpack

3.再安装webpack-cli:npm i -g  webpack-cli 或者  npm install webpack-cli -g

 4.最后webpack创建vue项目:vue init webpack 项目名称 ( 可能提示运行npm i -g @vue/cli-init )

5.项目目录创建完成

运行:npm run dev  

方法三:vite搭建vue

1.初始化创建项目:npm init vite@2.8.0(vite在创建vue项目时,默认直接创建vue3,vite的版本采用2.8.0的,最新的版本不可行)

2.创建完成:启动项目npm run dev 

3.安装vite插件: npm install vite-plugin-vue2@1.9.3 -D(vite-plugin-vue2的版本为1.9.3)

4.根目录创建vite.config.js文件,来注册插件

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/653405
推荐阅读
相关标签
  

闽ICP备14008679号