vue项目搭建配置sass、element-ui、vux、axios、服务器代理

一、项目搭建

1.npm install vue-cli -g

2.vue init webpack xxx

3.cd xxx

4.npm install

二、配置sass

1.下载sass-loader和node-sass

2.在build文件下的webpack.base.conf.js中的rules中加入

{

    test:/\.scss$/,

    loaders['style','css','sass']

}

3.页面中

<style lang='scss' scoped='' type='text/css'></style>

lang='scss'是闭合 lang='sass'不闭合

三、配置element-ui

1.命令行下element-ui

2.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);

3.直接在页面中使用组件

不用再组件中单独导入 在template模板中直接使用即可

四、配置vux

1.npm install vux --save

2.在build文件夹webpack.base.conf.js中修改

 

const vuxLoader = require('vux-loader');

const webpackConfig = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

},

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

},

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('media/[name].[hash:7].[ext]')

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

},

{

// 配置sass

test: /\.scss$/,

loaders: ["style", "css", "sass"]

},

]

},

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

}

 

module.exports = vuxLoader.merge(webpackConfig,{

plugins:['vux-ui']

})

 

注意：要下载vux-loader --save-dev

npm install less less-loader --save-dev

在页面中使用组件，要先导入import from  ，然后在components定义

五、使用axios

命令行下载axios

1.在main.js中导入

import axios from 'axios'

Vue.prototype.$axios = axios;

在组件中使用

this.$axios.get/post(路径，回调函数)

2.在组件中直接使用

import axios from 'axios'

使用

axios.get/post(路径，回调函数)

六、服务器代理

config中Index.js文件中

 

proxyTable: {

'/user':{

target:"http://localhost:3000",

changeOrigin:true,

pathRewrite:{

"^/user":"/users"

},

},

发现路径开头是user的url,会在url前面拼接target值，根据设置user会替换成users.

阅读更多