本文主要介绍如何使用 node 搭建一个基于 Vue + Vue Router + iView + webpack 的项目，阅读本文之前你可能需要知道：
以上知识在在本文中不会做太多的介绍，不太熟悉的朋友建议事先了解一下再阅读本文。
项目 github 地址点击这里
1. 初始化
md vue-project && cd vue-project
git init
git remote add origin https://github.com/Unfantasy/vue-project
git pull origin master
npm init
git init 初始化 git。
npm init 之后根据它的提示创建 package.json，当然你也可以什么都不输入直接 enter 之后手动改 package.json 的内容也是可以的。
1.png
2. 准备
添加 webpack，Vue，Vue Router，iView等一系列开发包
npm i vue iview vue-router
npm install webpack webpack-dev-server webpack-cli -D
3. 编写代码
主要是编写 webpack 配置文件和 js 入口文件
webpack.config.js
require('babel-polyfill'); // es6-polyfill
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
devtool: 'source-map', // 开启 source-map, 生产环境的时候建议关掉提升打包效率
mode: 'development',
devServer: { // webpack-dev-server 服务配置
host: '0.0.0.0',
port: '8000',
},
entry: './src/entry', // 入口位置
output: { // 输出文件配置
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
module: { // loader 配置
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: /node_modules/,
loader: 'vue-loader',
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
// name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.(c|sc|sa)ss$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules')
],
// exclude: /node_modules/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(),
// require('postcss-import')(),
autoprefixer('last 2 versions')
]
},
},
'sass-loader'
]
}
],
},
externals: {
// 'react': 'React',
// 'react-dom': 'ReactDOM'
},
resolve: {
modules: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['.vue', '.wasm', '.mjs', '.js', '.json']
},
plugins: [ // 一些其他的插件
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'index.css',
})
]
};
index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import router from './router';
import App from './app';
Vue.use(VueRouter);
Vue.use(iView);
new Vue({
router,
render: h => h(App)
}).$mount('#app');
router.js
import VueRouter from 'vue-router';
import Index from '../pages/index/index.vue';
import Index2 from '../pages/index2/index.vue';
const routes = [
{ path: '/index', component: Index },
{ path: '/', component: Index },
{ path: '/index2', component: Index2 },
]
const router = new VueRouter({
routes,
});
export default router;
app.vue
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
4. 添加 lint
eslint，stylelint 这些代码检查工具可以帮助我们更好，更规范的写代码，所以一般情况下建议加上。lint 的一些规则这里就不再贴出来，具体想看的可以去 github 里面自行查看
最后把最终的 package.json 贴出来，这是加了 webpack， eslint，stylelint 之后的。
package.json
{
"name": "vue-project",
"version": "1.0.0",
"description": "从零开始搭建一个基于 Vue 的项目",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --color --hot",
"build": "webpack --mode=production",
"dev": "webpack --mode=development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Unfantasy/vue-project.git"
},
"author": "Unfantasy",
"license": "ISC",
"bugs": {
"url": "https://github.com/Unfantasy/vue-project/issues"
},
"homepage": "https://github.com/Unfantasy/vue-project#readme",
"dependencies": {
"iview": "^3.1.0",
"vue": "^2.5.17",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^9.1.3",
"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"mini-css-extract-plugin": "^0.4.2",
"node-sass": "^4.9.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^5.3.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"stylelint": "^9.5.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-scss": "^3.3.0",
"url-loader": "^1.1.1",
"vue-loader": "^14.2.3",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
}
}
网友评论