Vue项目中常用的命令大全

237 阅读2分钟

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

安装node

node安装

检查node环境

node - v

安装webpack

npm install webpack -g

安装Vue cli命令

# npm:
npm install -g @vue/cli
# yarn:
yarn global add @vue/cli
# mac:
sudo npm install -g @vue/cli

检查版本是否正确:

vue --version
或
vue - V

设置淘宝镜像

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

检查淘宝镜像

npm config get registry

初始化项目

vue create xxx

进入项目

cd xxx

运行项目

npm run serve

安装vue-router命令

npm install vue-router --save

安装axios命令

npm install axios --save

axios使用

在main.js文件中引入(在main.js引入即为全局引入)

// axios需要使用prototype将axios挂载到原型上 ,$后面是自己另起的名称,以后就可以使用该名称
Vue.prototype.$axios = Axios

安装element-ui

npm i element-ui -S

element-ui使用

在 main.js 中写入以下内容:

import Vue from 'vue'; 
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue'; 

Vue.use(ElementUI); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
});

安装 Element Plus

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

使用Element Plus

// main.ts引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

安装less-loader

npm  i less-loader

安装sass

npm install -g sass

vite 安装

兼容性注意
Vite 需要 Node.js版本 >= 12.0.0

# Yarn:
yarn create @vitejs/app
# NPM:
npm init @vitejs/app
  • 项目创建:要构建一个 Vite + Vue 项目,运行:
# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

运行项目

cd my-vue-app
yarn
yarn dev

cd my-vue-app
npm install
npm run dev

打包

npm run build

git

配置用户名 git config --global user.name “GitHub上注册的用户名”
配置用户邮箱:git config --global user.email “GitHub上注册的邮箱”
1.在要上传的文件中反键打开git Bash Here开头的
2.输入git init 通过命令git init把这个文件夹变成Git可管理的仓库
3.输入git add .
4.输入git commit -m "注释" 用git commit把项目提交到仓库。
5.输入git remote add origin “远程仓库地址”
6.输入git push origin master上传

微信图片_20220323230201.png 来自前端Q公众号

暂时就想到了这么多,给自己记笔记。

一个前端小白,若文章有错误内容,欢迎大佬指点讨论!