位置: 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的步骤)

  • wifi已连接不可上网是什么原因呢(wifi已连接不可上网是什么原因)(wifi已连接不可上网是什么原因电脑)

    wifi已连接不可上网是什么原因呢(wifi已连接不可上网是什么原因)(wifi已连接不可上网是什么原因电脑)

  • qq相册回收站永久删除的照片怎么恢复(qq相册回收站保留多久)

    qq相册回收站永久删除的照片怎么恢复(qq相册回收站保留多久)

  • 小米手机怎么开空调(小米手机怎么开小窗)

    小米手机怎么开空调(小米手机怎么开小窗)

  • wps2019怎么设置网络线(wps2019怎么设置纸张方向)

    wps2019怎么设置网络线(wps2019怎么设置纸张方向)

  • 苹果手机如何设置铃声(苹果手机如何设置门禁卡nfc功能)

    苹果手机如何设置铃声(苹果手机如何设置门禁卡nfc功能)

  • 手机爱奇艺怎么扫描二维码(手机爱奇艺怎么退出登录)

    手机爱奇艺怎么扫描二维码(手机爱奇艺怎么退出登录)

  • 通信助手取消了会怎样(通信助手包取消有影响吗)

    通信助手取消了会怎样(通信助手包取消有影响吗)

  • 鼠标灯不亮(开机鼠标灯不亮)

    鼠标灯不亮(开机鼠标灯不亮)

  • 华为屏幕保修多久呢(华为屏幕保修期多久)

    华为屏幕保修多久呢(华为屏幕保修期多久)

  • 不插内存条可以开机吗(不插内存条可以亮机吗)

    不插内存条可以开机吗(不插内存条可以亮机吗)

  • 直通车展现量突然没了(直通车展现量突然变少)

    直通车展现量突然没了(直通车展现量突然变少)

  • 8mp摄像头是什么意思(48mp+8mp+2mp摄像头)

    8mp摄像头是什么意思(48mp+8mp+2mp摄像头)

  • 三星pay交通卡无法下载(三星pay交通卡没反应)

    三星pay交通卡无法下载(三星pay交通卡没反应)

  • 佳能相机充电要多久(佳能相机如何充电)

    佳能相机充电要多久(佳能相机如何充电)

  • gpt和mbr的区别(固态硬盘gpt和mbr的区别)

    gpt和mbr的区别(固态硬盘gpt和mbr的区别)

  • 怎么在字上加特殊符号(怎么在文字上加特殊符号)

    怎么在字上加特殊符号(怎么在文字上加特殊符号)

  • id锁能解吗(iphoneid锁能解吗)

    id锁能解吗(iphoneid锁能解吗)

  • 快手为什么发不了朋友圈(快手为什么发不出去视频了)

    快手为什么发不了朋友圈(快手为什么发不出去视频了)

  • 苹果xr的3dtouch在哪里

    苹果xr的3dtouch在哪里

  • 怎样下载京东购物(怎样下载京东购物软件)

    怎样下载京东购物(怎样下载京东购物软件)

  • kindle32g有必要吗(kindle32g还是8g)

    kindle32g有必要吗(kindle32g还是8g)

  • 快手封面四格怎么弄(怎样在快手封面上呈现出四幅图)

    快手封面四格怎么弄(怎样在快手封面上呈现出四幅图)

  • 微视怎么激活免流量(微视领取vip)

    微视怎么激活免流量(微视领取vip)

  • 小米手环4怎么换主题(小米手环4怎么重新绑定手机)

    小米手环4怎么换主题(小米手环4怎么重新绑定手机)

  • 微云怎么取消自动续费(怎么关掉微云自动续费)

    微云怎么取消自动续费(怎么关掉微云自动续费)

  • 探探会员充值(探探会员充值方法)

    探探会员充值(探探会员充值方法)

  • 云计算服务器有哪些要求(云计算服务器有什么用)

    云计算服务器有哪些要求(云计算服务器有什么用)

  • 本地连接没有了怎么办(本地连接没有了怎么恢复)

    本地连接没有了怎么办(本地连接没有了怎么恢复)

  • 补缴以前年度企业所得税如何填报汇算清缴表
  • 应付福利费余额在借方
  • 应收账款减少计提坏账吗
  • 销售折扣购货方的会计分录
  • 收到施工方给红包怎样处理
  • 不续约赔偿金要交税吗
  • 企业支付的产品广告费应计入什么账户借方
  • 股票发行的会计分录
  • 相关规定个人运输发票税率是多少
  • 其他服务业经营范围包括哪些
  • 销售淀粉的税率
  • 固定资产金额小于5000元,可以不一次性税前扣除吗
  • 坏账收回的账务处理方法
  • 金融机构计提减值准备
  • 企业所得税弥补
  • 烟酒专用发票能抵税吗
  • 补缴城镇土地使用税会计分录怎么做
  • 个人取得经济补偿金个人所得税计算
  • 别的公司代缴社保合法
  • 微软产品提示订单失效
  • 债权人和债务人是什么意思
  • 联想小新Air15如何进入bois
  • 公司收到个人入股资金要交税吗
  • 公司资产总额怎么算的啊
  • kjournald是什么进程
  • php字段
  • 收到员工罚款分录
  • 增值税退税要准备什么资料
  • 【类ChatGPT】本地CPU部署中文羊驼大模型LLaMA和Alpaca
  • html表白代码动态
  • vscode插件大全
  • 主营业务收入和营业外收入的区别
  • 其他应付款个人在贷方表示什么
  • seata1.3.0配置
  • spring整合mongodb
  • mysql设置查询超时时间
  • 电子章打印不来
  • 人工成本的分类是
  • SQL Server Management Studio教程
  • sqlserver游标的使用
  • 物业代收代缴是什么意思
  • 应纳税所得额是利润总额还是净利润
  • 金融资产是分为哪三分类?
  • 什么是试算平衡表,编制试算平衡表时应注意哪些方面
  • 旅行社开具的发票
  • 以土地作价投资合伙企业是否缴纳土地增值税
  • 缴纳上月增值税及本月预缴增值税
  • 设备安装成本怎么结转
  • 内含增长率的推导
  • 股东退股取现怎么处理
  • 应收账款有什么
  • 财产清查存在的问题及原因分析
  • 不含税价格怎么算公式(1+3%)
  • 存货核算的含义
  • mysql 5.7.13 winx64安装配置方法图文教程
  • 一些有用的sql语句是什么
  • 史上最快的速度
  • 该程序无法正常启动
  • win10的ghost
  • ibm笔记本开机进不去系统
  • 永恒之塔改注册表什么意思
  • win10没有显示
  • ubuntu 12.04 intel集成显卡设置分辨率的步骤分享
  • egui.exe是什么进程
  • xp电脑内存占用过高怎么办
  • centos中netspeeder网络加速/优化器的安装方法
  • efi ghost win7
  • jquery生成网页内容
  • nodejs读取json文件,并返回列表
  • 修改windows server2012服务器密码
  • config_system_switchs
  • python里面import
  • nodejs获取客户端设备信息
  • 关于全局变量和局部变量说法不正确的是
  • JavaScript基础语法详解
  • comparable接口怎么用
  • 事务所是干什么的会计
  • 大学奖学金需要什么材料
  • 国家税务总局一个月多少钱
  • 舆论与舆情之间的关系是怎样的?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设