Vue element ui 一些指令记录

从0到1带你搭建一个vue3.0项目(vue-cli脚手架版）_国服第二切图仔的博客-CSDN博客_全局安装vue脚手架

 

参考

创建项目的步骤

卸载vue 3.0

npm uninstall -g @vue/cli

卸载vue 2.0

npm uninstall vue-cli -g 

安装Vue 2.0

npm install -g vue-cli

npm install --global vue-cli  全局安装vue

安装Vue3.0

npm install -g @vue/cli

安装webpack

npm install webpack -g   全局安装

webpack -v   查看版本号，出现版本号则安装成功

webpack 4.X 开始，需要安装 webpack-cli 依赖  如果上面指令提出就使用下面这条命令

npm install webpack webpack-cli -g  

vue init webpack myvue(项目名称)       来初始化项目

vue init <template-name> <project-name>

webpack：一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify：一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple：一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
simple：一个最简单的单页应用模板。

输入命令后，会跳出几个选项让你回答：Project name： 项目名称
Project description 项目描述
Author 作者
Runtime + Compiler: recommended for most users 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，推荐了第一个
Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车

安装工程依赖模块
进入工程根目录运行

npm install

1. 运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

npm run dev

然后就可以在浏览器里输入
http: //localhost:8080
看到我们的vue首页了

1、在项目目录 输入 npm i element-ui -S 引入element UI

如遇到以下版本问题则 在后面加一行 --legacy-peer-deps

 完整的就是 npm i element-ui -S --legacy-peer-deps

2、第二步，修改main.js文件

（一）如果你的原始【main.js】文件中是这样的： 

import Vue from "vue";
import App from './App.vue';
import router from "./router";
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

那么以上方式没问题，只需添加以下代码即可引用ElementUI：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

 （二）如果你的原始【main.js】文件中是这样的： 

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

则需要通过这种方式引入ElementUI：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
createApp(App).use(ElementUI);

NodeJS的一些安装配置：

1、修改下载模块仓库为淘宝镜像源

npm config get registry 查看Npm镜像源

npm config set registry https://registry.npm.taobao.org     永久修改为淘宝镜像源

2、安装cnpm        npm install -g cnpm --registry=https://registry.npm.taobao.org

 由于npm软件包管理器有时可能不太稳定，安装依赖包容易报错，所以就有了中国人开发的cnpm，
本人亲测，比npm稳定多了，速度还更快（因为是国内源），本文就教一教大家cnpm如何安

3、webpack 具体啥用不太懂  npm install webpack -g
webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli 
npm install --global webpack-cli