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.页面中
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.