vuecli+element-ui+sass+axios的搭建

1.全局安装脚手架


npm install --global vue-cli


2.初始化一个脚手架项目


vue init webpack vuetest


3.选项配置:

Project name (vuetest) --回车跳过

Project description (A Vue.js project) --项目描述,也可直接点击回车

Author (........) -- 作者

Runtime + Compiler: recommended for most users --运行加编译

Install vue-router? (Y/n) --选Y,官方路由

Use ESLint to lint your code? (Y/n) --是否使用ESLint管理代码,新手可以用

Setup unit tests with Karma + Mocha? (Y/n) --我选Y

Setup e2e tests with Nightwatch(Y/n) --我选Y


5.下载vscode(
项目初始化好后,我们开始安装开发工具,我选用的是VScode )

安装插件:ESLINT和Vetur


6.引入项目:打开文件夹-项目文件夹

 


7.引入sass

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install --save-dev node-sass sass-loader

如果出现异常: MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。

解决方法 :npm install --global --production windows-build-tools (全局安装windows构建工具)

https://www.cnblogs.com/rainheader/p/6505366.html


8.引入完成之后: npm install

package.json会引入sass;

然后修改 webpack.base.config.js在loaders里面加上


9.引入element-Ui组件

npm install element-ui --save

修改配置: webpack.base.conf.js

添加:

{ test: /\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/, loader:"file" }

使用: 打开项目:src/main.js,添加下面三条

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

逻辑:

核心js 比如main.js 引入路由,组件,初始化一些公用数据。

 

10.引入morkjs模拟请求发送:

npm install mockjs --save-dev

 

11.引入axios发送http请求:

npm install axios --save

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是搭建 Vue3 项目的步骤: 1. 安装 Node.js 首先,你需要在你的电脑上安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。你可以在 https://nodejs.org/ 上下载并安装 Node.js。 2. 安装 Vue CLI Vue CLI 是一个官方的 Vue.js 项目脚手架,可以帮助你快速搭建一个 Vue 项目。你可以使用以下命令安装 Vue CLI: ``` npm install -g @vue/cli ``` 3. 使用 Vue CLI 创建项目 使用 Vue CLI 创建一个新的 Vue 项目非常简单,只需要执行以下命令: ``` vue create your-project-name ``` 在创建项目的过程中,你需要选择一些选项,例如: - 选择一个预设(你可以选择默认的预设或手动配置) - 选择要使用的插件(例如 TypeScript、Vuex、Vue Router、Axios 等) - 配置项目的名称、描述等信息 在这个过程中,你需要选择 TypeScript、Vuex、Vue Router 和 Axios 插件,并选择手动配置预设。在手动配置预设时,你需要选择 Vue 3 和 Babel 编译器。 4. 安装 Element Plus Element Plus 是一个基于 Vue 3 的 UI 组件库,可以帮助你快速构建界面。你可以使用以下命令安装 Element Plus: ``` npm install element-plus --save ``` 然后,在你的 main.ts 文件中引入 Element Plus: ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(store).use(router).use(ElementPlus).mount('#app') ``` 5. 使用 Sass Sass 是一种 CSS 预处理器,可以帮助你更加方便地书写 CSS。你可以使用以下命令安装 Sass: ``` npm install sass --save-dev ``` 然后,在你的 App.vue 文件中使用 Sass: ```vue <template> <div class="app"> <h1>Hello, world!</h1> </div> </template> <style lang="scss"> .app { color: red; } </style> ``` 6. 配置 Axios Axios 是一个用于发送 HTTP 请求的 JavaScript 库。你可以使用以下命令安装 Axios: ``` npm install axios --save ``` 然后,在你的 main.ts 文件中配置 Axios: ```typescript import axios from 'axios' axios.defaults.baseURL = 'http://localhost:3000/api' axios.defaults.timeout = 5000 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) axios.interceptors.response.use(response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 return Promise.reject(error) }) ``` 现在你已经成功搭建了一个 Vue3 项目,使用了 TypeScript、Vite、Vuex、Element Plus、AxiosSassVue Router。你可以根据你的需要进行进一步的开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值