vue,elementUI,less,axios,qs的安装及打包

时间:2023-03-08 15:45:58
vue,elementUI,less,axios,qs的安装及打包

目前一直使用vue去搭建项目,我个人习惯用Visual Studio Code编辑工具,所以下面的所有操作都是在这个编辑器中

在安装的时候,为了避免安装过程中出错,你最好安装了淘宝镜像(官网:https://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

1,安装vue-cli

cnpm install vue-cli -g        //    通过vue -V查看vue版本号

vue init webpack

Generate project in current directory? (Y/n)  在当前目录中生成项目(是)

Project name (admin)项目名称

Project description (A Vue.js project) 项目描述

Author    作者

Vue build (Use arrow keys)选则Runtime + Compiler: recommended for most users

Install vue-router? (Y/n)是否下载vue-router(是)

Use ESLint to lint your code? (Y/n)是否使用ESLint(否)

Set up unit tests (Y/n)是否设置单元测试(否)

Setup e2e tests with Nightwatch? (Y/n) 是否使用e2e(否)

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)项目创建后,我们应该为您运行“NPM安装(是)

npm run dev    运行项目

2,安装elementUI

cnpm install element-ui --save

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

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'   (这的路径可能会有所改动)

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

3,安装less(CSS 预处理语言)

cnpm install less less-loader --save

<style lang="less">    在使用less的文件中的style标签上添加 lang="less"

<style>

4,安装axios

cnpm install axios --save

import axios from 'axios'    哪个文件需要用到就在哪个文件中引入

5,安装qs

npm install --save axios vue-axios qs

import qs from 'qs'   qs 用来解决vue中post请求以 a=a&b=b 的格式(详情

6,打包

由于直接打包不能正常预览,所以需要配置

webpack.prod.conf.jsoutput添加参数publicPath:'./'

由于现在网上搭建方式很多,可能由于版本问题原因,有些搭建方式有问题。所以本文只是对自己快速搭建环境而写!

作者:莫言_df49
链接:https://www.jianshu.com/p/92921c80474e
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。