位置: IT常识 - 正文

VUE2安装初始化步骤(2022)(vue初始化命令)

编辑:rootadmin
VUE2安装初始化步骤(2022) 1.安装node.js

推荐整理分享VUE2安装初始化步骤(2022)(vue初始化命令),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue初始化命令,vue初始化项目,vue初始化流程,vue初始化项目命令,vue初始化流程,vue2初始化项目,vue2.0安装,vue2初始化项目,内容如对您有帮助,希望把文章链接给更多的朋友!

下载安装node.js,win7使用node.js v12版的(为目前通用,建议都是用这个版本),win10可以使用最新版本的。CLI至少要求v12版本的。

node-v12.22.10-x64.msi

安装完成后开启cmd,检验版本:

node -v2.配置淘宝镜像

搜索npm淘宝镜像,加速后续包的下载,在cmd中配置:

npm config set registry https://registry.npm.taobao.org

检验配置的淘宝镜像:

npm config get registry3.下载CLI

搜索VUE CLI,安装下载 :

npm install -g @vue/cli4.使用CLI安装VUE2

在cmd中cd到需要建立项目的目录下,安装vue2:

vue create project_name

注:

project_name为项目名称,请自定义创建

后续参数配置如下:

4.1.人工选择特性4.2.选择以下两项特性4.3.选择vue版本

4.4. 选择将包独立存放

4.5.选择保存以上配置,供以后使用

4.6. 安装完成后,按提示运行,访问首页面测试VUE2安装初始化步骤(2022)(vue初始化命令)

5.安装外部包5.1安装vant2npm i vant@latest-v2 -S5.2安装element-uinpm i element-ui -S5.3.安装Axiosnpm install axios6.包统一配置并按需引入

在src下新建plugins文件夹,里面一个文件就是一个包的配置文件,最后逐个引入main.js:

6.1.vant2按需引入npm i babel-plugin-import -D

新建VantUI.js:

import Vue from "vue"import { Button, Form, Field } from "vant"Vue.use(Button)Vue.use(Form)Vue.use(Field)6.2.element-ui按需引入npm install babel-plugin-component -D

新建ElementUI.js:

import Vue from 'vue'import { Button } from "element-ui"Vue.use(Button)6.3.Axios配置

新建Axios.js:

import Vue from "vue";import axios from "axios";const url = "http://localhost/" //后台地址axios.defaults.baseURL = url; //请求默认后台地址axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';Vue.prototype.$http = axios //后续请求使用Vue.prototype.$http_url = url //全局后台地址7.修改main.js配置import Vue from 'vue'import App from './App.vue'import router from './router'import './plugins/VantUI'import './plugins/ElementUI'import './plugins/Axios'Vue.config.productionTip = falsenew Vue({  router,  render: h => h(App)}).$mount('#app')

使用了按需引入后,需要修改项目根目录下babel.config.js,修改为:

module.exports = {  presets: [    '@vue/cli-plugin-babel/preset',    [      "@babel/preset-env", { "modules": false }    ]  ],  plugins: [    [      "component",       {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ],    [      'import',       {      libraryName: 'vant',      libraryDirectory: 'es',      style: true      },       'vant'    ]  ]}8.路由配置修改

router/index.js修改如下:

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [  //初始路由  {    name: '/',    path: "/",    redirect: {        name: 'NotFound', //默认导向的路由名    }  },  //未匹配到的路由默认导向这里 {     path: '/:pathMatch(.*)*',     name: 'NotFound',     component: () => import('../components/Error.vue'),  },]const router = new VueRouter({  mode: 'history',  base: '/web',  routes})export default router9.修改App.vue,增加默认样式

修改为如下:

<template>  <div id="app">    <router-view/>  </div></template><style>*{ margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; }html{ width: 100%; height: 100%;}body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, "Microsoft Yahei","PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif; }#app{ width: 100%; height: 100%;}</style>10.修改index.html配置

在public/index.html,需要修改如下属性:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

可变更项目标题与logo。

11.修改vue.config.js文件,发布配置

项目根目录下增加如下内容的vue.config.js:

module.exports = {  publicPath: '/web/',}

注:指定访问相对路径前缀为:根目录/web/下。目前项目都以web为访问前缀。比如:原访问地址为:http://www.demo.com/现在需要为http://www.demo.com/web。作用在于后续与后端结合,为避免跨域使用。

12.增加Error.vue,启动服务

删除views文件夹,为与vue3统一,所有组件放在components中,放置Error.vue :

<template>  <p>hello man</p></template>

在文件夹地址前加cmd,回车直接打开运行:

npm run serve

运行成功后,复制地址,在浏览器上查看。

13.定制化文件目录13.1.在项目根目录下建立static文件夹

这里统一放置静态资源与文件。

13.2.在项目src下建立model文件夹

这里放置模板文件。

本文链接地址:https://www.jiuchutong.com/zhishi/297668.html 转载请保留说明!

上一篇:【通信原理】揭开傅里叶级数与傅里叶变换的神秘面纱(通信原理简明)

下一篇:使用Session和cookie会话对象实现简单购物车功能(超详细)(使用session的步骤)

  • 网站分析工具的四大重境界(常用的网站分析工具)

    网站分析工具的四大重境界(常用的网站分析工具)

  • 小米路由器怎么连接宽带(小米路由器怎么查看是否有人蹭网)

    小米路由器怎么连接宽带(小米路由器怎么查看是否有人蹭网)

  • 华为荣耀20青春版是双系统吗(华为荣耀20青春版上市时间和价格)

    华为荣耀20青春版是双系统吗(华为荣耀20青春版上市时间和价格)

  • fd开头苹果手机是哪里生产的(fd开头的苹果手机是哪里生产的)

    fd开头苹果手机是哪里生产的(fd开头的苹果手机是哪里生产的)

  • iphonex面容识别不了(iphonex面容识别后直接开锁)

    iphonex面容识别不了(iphonex面容识别后直接开锁)

  • wps包含word吗(wps包含了word和excel吗)

    wps包含word吗(wps包含了word和excel吗)

  • 抖音号注销是不是什么都没有了(抖音号注销是不是实名就取消了)

    抖音号注销是不是什么都没有了(抖音号注销是不是实名就取消了)

  • 钉钉为什么不能退群(钉钉为什么不能发起视频会议)

    钉钉为什么不能退群(钉钉为什么不能发起视频会议)

  • 手机看视频没声音是怎么回事(手机看视频没声音了怎么办)

    手机看视频没声音是怎么回事(手机看视频没声音了怎么办)

  • word论文怎么添加目录(word论文怎么添加注释)

    word论文怎么添加目录(word论文怎么添加注释)

  • 苹果手机突然卡死了关机也关不了怎么回事(苹果手机突然卡死屏幕不能动)

    苹果手机突然卡死了关机也关不了怎么回事(苹果手机突然卡死屏幕不能动)

  • 微信社群空间怎么开通(微信社群空间怎么进入)

    微信社群空间怎么开通(微信社群空间怎么进入)

  • 苹果max灵敏度设置(xsm灵敏度)

    苹果max灵敏度设置(xsm灵敏度)

  • 余额怎么转入余额宝(余额怎么转入余额宝苹果)

    余额怎么转入余额宝(余额怎么转入余额宝苹果)

  • 触漫如何获取无数钻石(触漫怎么获得无限钻石不需要充值)

    触漫如何获取无数钻石(触漫怎么获得无限钻石不需要充值)

  • 电脑遇到问题需要重启完成100%后怎么操作(电脑遇到问题需要重启我们只收集错误信息)

    电脑遇到问题需要重启完成100%后怎么操作(电脑遇到问题需要重启我们只收集错误信息)

  • 积目怎么删除发布的内容(积目怎么删除资料照片)

    积目怎么删除发布的内容(积目怎么删除资料照片)

  • 滴滴静默是什么意思(滴滴账号静默要多久才可以接到单)

    滴滴静默是什么意思(滴滴账号静默要多久才可以接到单)

  • pagedown键的作用(page down键的功能)

    pagedown键的作用(page down键的功能)

  • 苹果手机自动锁定时间怎么改不了(苹果手机自动锁定什么意思)

    苹果手机自动锁定时间怎么改不了(苹果手机自动锁定什么意思)

  • 如何激活苹果11(如何激活苹果11promay)

    如何激活苹果11(如何激活苹果11promay)

  • shelper是什么软件(sheiper是什么软件)

    shelper是什么软件(sheiper是什么软件)

  • 抖音视频怎么自制配音(抖音视频怎么自动播放)

    抖音视频怎么自制配音(抖音视频怎么自动播放)

  • 圈厨是不是小米(圈厨这个牌子好吗)

    圈厨是不是小米(圈厨这个牌子好吗)

  • qq4g在线是真的在线吗(qq4g在线说明了什么)

    qq4g在线是真的在线吗(qq4g在线说明了什么)

  • 四川省学生资助管理系统介绍(四川省学生资助政策)

    四川省学生资助管理系统介绍(四川省学生资助政策)

  • 转转卖家要交保证金吗(转转卖货需要缴纳保证金吗)

    转转卖家要交保证金吗(转转卖货需要缴纳保证金吗)

  • 腾讯地图如何纠错(腾讯地图怎么样)

    腾讯地图如何纠错(腾讯地图怎么样)

  • 快手加入黑名单对方还会看到你吗(快手加入黑名单后对方能看见作品吗)

    快手加入黑名单对方还会看到你吗(快手加入黑名单后对方能看见作品吗)

  • 家庭版系统如何开启组策略(家庭版系统如何重装成专业版本)

    家庭版系统如何开启组策略(家庭版系统如何重装成专业版本)

  • 由旅行社开具的电子普票代订机票能抵扣税吗?
  • 黄金消费税计税依据
  • 卷式发票是什么样的
  • 另收取包装物押金
  • 年平均资金占用额计算公式
  • 钱收多了退回去怎么说好
  • 设计费用计入产品成本吗
  • 商业承兑汇票托收凭证怎么做分录
  • 对公账户的钱怎么取出来才不用交税
  • 对供应商的罚款怎么入账
  • 单位之间借款利息可以开票么
  • 税目与应纳税额的关系
  • 小规模不动产租赁税率是否减按1%
  • 金税三期有什么功能
  • 税收预测表模板
  • 2018一般纳税人印花税减半吗
  • 汇算清缴是啥
  • 劳务外包公司代发工资能正常发吗
  • 企业支付宝可以转账到对公账户吗
  • 个体工商户是否属于法人
  • 增值税附加税怎么计提
  • 境外投资企业如何交税
  • mac的键盘怎么打开
  • 联想昭阳k41笔记本
  • 网银年费如何做账
  • 出差环境补贴怎么算
  • php面向对象优点,缺点
  • 公司注销做账
  • vue实现导出
  • 冈山平原
  • 收到的担保费如何记账
  • 商标个性设计
  • echarts 柱状图滚动与gridlayout移动冲突
  • php rsa
  • 现金流量表 科目
  • 企业和银行未达账项
  • 微信小程序中如何打开不加检验文件的网页
  • vue父子组件生命周期钩子执行顺序
  • 微信小程序项目中的 ______ 文件是全局配置文件
  • ls -all命令
  • 帝国cms适合建什么站
  • 资产盘盈盘亏处理
  • 资产负债表没有期末数
  • 企业并购的主要特征是a扩大企业规模
  • 金蝶利润表没有信用减值损失
  • 取得土地使用权所支付的金额包括契税吗
  • sqlserver 批量修改
  • 新会计准则规定
  • 赠送给客户的商品怎么入账
  • 库存股增加记哪一方
  • 固定资产盘亏是营业外支出吗
  • 累计折旧的借贷方表示
  • 英飞拓拟2.1亿出售子公司股权
  • 零余额账户收到国税局退款
  • 分公司非独立核算企业所得税税率
  • 暂估入账错误了怎么办
  • 工会发放节日慰问品种类
  • 住院伙食补助费每天50
  • 展示费是业务宣传费吗
  • mysql 索引的类型
  • ubuntu 安装指定位置
  • windows7怎么打开开机启动项
  • 苹果电脑安装macos怎么安装
  • 在windows下把绿色程序添加到鼠标右键的方法
  • centos 常用命令教程
  • centos7如何添加光盘
  • zui哪个版本最好
  • win7打印错误怎么解决
  • linux 管理员登录
  • unity总结
  • nodejs代码规范
  • 安卓骰子游戏
  • python编写人工智能
  • cocos2djs
  • 一个android项目一般包含哪些目录?各有什么用途?
  • 编写python
  • jquery导航菜单
  • python 代码缩进
  • 湖北省国家税务总局
  • 江苏电子口岸卡邮寄大概需要多久
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设