# createVueProject
**Repository Path**: yileng/createVueProject
## Basic Information
- **Project Name**: createVueProject
- **Description**: 不使用vue-cli脚手架,手动构建一个vue项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-04-11
- **Last Updated**: 2021-12-17
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 从零构建vue项目
## README
# createVueProject
#### 介绍
不使用vue-cli脚手架,手动构建一个vue项目
#### 一、准备工作
创建目录结构，所有文件内容为空。
#### 二、初始化package.json，安装项目用到的包
**2.1快速初始化package.json**
```
npm init -y
```
**2.2 安装依赖**
主要有以下依赖：
vue
vue-router
babel-loader
babel-core
vue-loader
node-sass
sass-loader
css-loader
style-loader
webpack
webpack-cli
webpack-dev-server
html-webpack-plugin
vue-template-compiler
```
npm install vue vue-router -S
```
```
npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-compiler -D
```
**2.3配置项目启动执行脚本命令**
```
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
},
```
最终完整的package.json内容如下，你也可以直接复制package.json然后执行`npm install`
```
{
"name": "createVueTest",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"html-webpack-plugin": "^4.2.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
```
#### 三、配置入口文件等
```
//index.html 在body元素下增加id为app的div元素，用于挂载vue实例
```
```
//App.vue 增加路由出口
```
```
//main.js 引入vue vue-router 样式 构建vue实例等
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assts/style/common.scss'
new Vue({
el: '#app',
router,
render: h => h(App)
})
```
#### 四、构建webpack.config.js配置文件
```
//webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const config = {
//入口文件
entry: path.join(__dirname, 'src/main.js'),
//输出文件
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
plugins:[
new VueLoaderPlugin(),
//生成html页面并导入bundle.js，如果配置了filename则以项目中filename指定的html为模版
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
})
]
}
module.exports = config
```
#### 五、配置路由
```
// /src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
title: '重定向',
redirect: '/home'
},
{
path: '/home',
name: 'name',
title: '首页',
component: () => import ('../views/home.vue')
},
{
path: '/content',
name: 'content',
title: '内容',
component: () => import ('../views/content.vue')
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next)=>{
console.log(to)
next()
})
export default router
```
#### 六、其他工作
至此，项目已经完成大部分工作，只需要处理一下细节问题方便查看效果，具体如下：
**1.在home.vue content.vue增加文字内容以查看路由是否正常**
```
这是content组件内容
```
```
这是content组件内容
```
**2.在common.scss文件中写一些样式，已查看sass是否编译成功**
```
body{
color: blue;
background: #F4F4F5;
}
```
**3.最后再`npm install`安装一遍依赖文件避免遗漏**
**4.`npm run dev`启动项目**
具体效果如下：
