vue3.0教程——搭建Vue脚手架简化版

Posted 2023-04-05 热爱生活的小郭子

目录

哈喽，大家好丫，你们的小郭子又来啦 ~

一、环境要求

（1）node安装（前端开发环境）

 （2）vue-cli脚手架安装

二、安装依赖

 （1）使用命令行安装以下依赖

（2）通过 vue ui 命令以图形化界面来管理项目依赖

（3）导入你刚刚项目的地址​编辑

 （4）导入后，选择依赖

（5） 安装依赖

（6）全部依赖下载完成后，引入到项目，并且编写demo 

 三、引入依赖

（1）router/index.js

（2）store/index.js

（3）main.js

（4）最终效果

 四、创建一个项目

（1）指令

（2）选择Vue3模板

 （3）创建和依赖下载

（4）进入目录，启动项目

（5）查看项目 

哈喽，大家好丫，你们的小郭子又来啦 ~

今天来聊一聊Vue3的项目搭建问题。

话不多说，直接上干货，嘻嘻嘻 ~

                                

一、环境要求

（1）node安装（前端开发环境）

1.     打开node官网:https://nodejs.org/zh-cn/
2.     下载node并安装（安装vue3建议node在10.0版本以上）。
3.      输入node -v可显示node版本 

如图所示:

 （2）vue-cli脚手架安装

全局安装npm install -g @vue/cli 

 出现版本号表示安装完成了， 如下显示安装成功

                                           

二、安装依赖

 （1）使用命令行安装以下依赖

npm install vuex  vue-router  element-plus  axios   -S

npm install less less-loader@5.0.0  -D

npm install vuex  vue-router  element-plus  axios   -S
npm install less less-loader@5.0.0 -D

（2）通过 vue ui 命令以图形化界面来管理项目依赖

vue ui

（3）导入你刚刚项目的地址

 （4）导入后，选择依赖

（5） 安装依赖

(注意区分运行和开发依赖区别)

 

（6）全部依赖下载完成后，引入到项目，并且编写demo 

                                        

 三、引入依赖

（1）router/index.js

import  createRouter, createWebHashHistory  from 'vue-router'
import guide from '../views/guide.vue'
 
 
const routes = [
  
    path: '/',
    redirect: '/guide'
  ,
  
    path: '/guide',
    name: 'guide',
    component: guide
  ,
  
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
  
]
 
const router = createRouter(
  history: createWebHashHistory(),
  routes
)
 
export default router

（2）store/index.js

import  createStore  from 'vuex'
 
export default createStore(
  state: 
  ,
  mutations: 
  ,
  actions: 
  ,
  modules: 
  
)

（3）main.js

import  createApp  from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import less from 'less'
 
createApp(App).use(store).use(router).use(ElementPlus).use(less).mount('#app')

（4）最终效果

 四、创建一个项目

（1）指令

运行以下命令来创建一个新项目

vue create portal

（2）选择Vue3模板

 （3）创建和依赖下载

（4）进入目录，启动项目

 创建完成 ,进入目录，启动项目 ：cd portal ;npm run serve  

（5）查看项目 

浏览器查看项目 ：ctrl+单击网址

到这里我们就创建了一个vue3的demo项目（开不开心，嘻嘻嘻） 

好啦，今天的分享到这里就结束啦 ~

觉得我分享的文章不错的话，可以关注一下哦，嘻嘻嘻

 

                                       

vue组件库基于@vue/cli构建typescript版UI库 -环境搭建

使用@vue/cli4脚手架，从零开始搭建typescript版的UI库

1. 全局安装@vue/cli4

官网地址：https://cli.vuejs.org/zh/guid...

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version
@vue/cli 4.5.13 #当前版本

2.构建项目

# 创建项目totoro
vue create totoro

# 配置选项
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: vuecl4_vue2_ts
? Pick the package manager to use when installing dependencies: Yarn

3.简单配置

vscode 保存自动格式化

# vscode settings.json文件
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

yarn serve时自动打开浏览器

# 项目根目录新建vue.config.js配置文件

module.exports = {
  devServer: {
    open: true,// 启动项目时自动打开浏览器
  },
};

4.目录结构设计

• packages: 组件源码
• website: 原src目录，改为组件文档官网，展示示例
• website/docs: 组件文档和示例代码 markdown格式
• src: 组件公用工具函数
• src/theme: 组件样式文件夹（组件所有样式统一放这里）
• src/index.ts: 组件统一导出入口文件（整体导出，全量包）

5.修改vue.config.js配置

# vue.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");

module.exports = {
  devServer: {
    open: true,
  },
  pages: {
    index: {
      // page 的入口
      entry: "website/main.ts",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时
    },
  },

  configureWebpack: {
    resolve: {
      // 设置别名
      alias: {
        "totoro-ui": path.join(__dirname, "./"),
        packages: path.join(__dirname, "./packages"),
        "@": path.join(__dirname, "./website"),
        main: path.join(__dirname, "./src"),
      },
    },
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: (config) => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "packages"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap((options) => {
        // 修改它的选项...
        return options;
      });
  },
};