正常情况下我们都是使用vue-cli脚手架来搭建的vue的前端框架，但是这个的缺点是对初学者来说不能够很好的理解框架的运行及搭建过程，下面把个人在不使用脚手架的情况下搭建前端框架的过程写下来，希望能帮助到有需要的童鞋！
注意：以下环境均是在windows下操作的：
第一步：安装，node
直接在官方下载，然后和普通软件安装一样的，版本：v8.9.1
第二步：安装完后，建立自己的项目文件目录，
本人是建在：e:/github/drive-p，
为了演示，重新建立一个演示目录作为项目目录：E:\test_wsx\demo
第三步：启动dos 快捷键： win+r，然后：cmd 进到DOS命令行面板，输入：node -v ，检查node 的安装情况，
如果出现版本号，则表示安装成功，如下图：
第四步：在DOS面板进入到刚建的项目目录，输入命令行：
e:
cd test_wsx/demo
如下图：
第五步：初始化项目依赖：
输入命令行：npm init -y ,主要目的是建立一个项目依赖的json文件，这个文件用于管理后面的依赖包
npm : node 的一个shell命令，用于安装和卸载node包及相关插件
然后用编辑器打开刚刚建立的项目文件夹做为项目的根目录，个人用的是vscode
打开后发会现多了一个文件，如下图：
第六步：安装webpack包
命令行：npm install --save-dev webpack
注意：webpack 我们安装的时候带上：--save-dev 参数，目的是让依赖包只在本地开发环境安装，在线上环境不会安装，如果需要在线上进行安装依赖的，可以使用命令：npm install --save webpack, 顺便说下，卸载依赖包的命令是：npm uninstall --save / --save-dev webpack
安装成功后，可以看package.json文件，会多出来个devDependencies 的属性，如下：
如果安装有报错的，有可能是权限问题，可以：以管理员身份进行安装，具体步骤：
点击windos菜单键,然后出现下图，在：命令提示符上右键，以管理员身份运行，然后进行DOS，安装
webpack 是一个平台，要运行webpack 需要插件的配合，那么接下来我们统一把需要的相关插件列出来并一 一进行安装：
"babel-core": "^6.26.0", // es6 转换核心插件，具体可去官网查看
"babel-loader": "^7.1.2", // js 的loader 插件，主要是模块化js
"babel-plugin-transform-runtime": "^6.23.0", // 提供一个沙盒插件，具体说明，可参看：https://segmentfault.com/a/1190000009065987
"babel-preset-env": "^1.6.1", //esr 预处理插件
"babel-preset-stage-2": "^6.24.1", // es 的stage - 2 的插件，具体可参看stage-0 到 stage - 4 的区别，然后就可以理解了
"chalk": "^2.3.0", // 文本样式化插件
"child_process": "^1.0.2", //node 子进程包
"clean-webpack-plugin": "^0.1.17", // 清除内容插件
"css-loader": "^0.28.7", // css 的模块化插件
"extract-text-webpack-plugin": "^3.0.2", // 提取独立的文件插件
"html-webpack-plugin": "^2.30.1", // html 自动构建插件
"less": "^2.7.3", // less 的编译包 ，如果不使用less 的，可以不装
"less-loader": "^4.0.5", // less 的模块化插件, 不使用less的，可以不装
"ora": "^1.3.0", //分割器，
"rimraf": "^2.6.2", // 删除插件
"semver": "^5.4.1", // 版本检查插件
"shelljs": "^0.7.8", // shell 命令插件
"style-loader": "^0.19.1", // style 标签 插件
"uglifyjs-webpack-plugin": "^1.1.6", // 压缩插件
"url-loader": "^0.6.2", // 一般用于图片的地址，可转换为base64格式
"webpack-dev-middleware": "^2.0.3", // 中间件，用于热重载 HRM
"webpack-dev-server": "^2.9.7", // webpack 的本地服务器， 也可以HRM
"webpack-hot-middleware": "^2.21.0" // 中间件，用于热重载，HRM
"express": "^4.16.2", // 提供服务器端的中间件 和HRM的中间件一起，做到HRM
以下插件安装为 --save 的线上依赖，看过vue的都熟悉吧！
"vue": "^2.5.13",
"vue-loader": "^13.6.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1"
以上是我们接下来需要的一些插件及node 包，后续还需要的一步一步的可以再完善
可以先把这些插件全部安装了，也可以边用边安装！
第七步：开始构建服务器环境，先让程序跑起来
有两种方式，一种是用webpack-dev-server来完成，一种是用：express + webpack-dev-middleware + webpack-hot-middleware 来完成
这两种方式都可以实现HRM，脚手架用的是第二种方式，我们两种都可以尝试一下！
第一种：webpack-dev-sever
要让webpack-dev-server跑起来，就需要对webpack 进行配置，我们先用最原始的写法，即在根目录建立一个webpack.config.js的配置文件
现在的目录结构是这样的，其中：package-lock.json 是在安装了依赖后生成的文件，这个文件的主要作用就是确保你安装的包的依赖关系，保证在下次进行安装的时候，依赖关系 依然正确！
webpack.config.js 新建好以后，我们就可以做一些配置了
先简单配置如下：
其中：
entry : 表示项目的入口文件，这个文件主要表示整个项目的依赖关系的入口，webpack会根据这个入口来加载所有的项目中的文件，包括：js,css,image,html等，这个就相当于我们的单入口页面
devServer : 是webpack-dev-server 的一个配置项，port : 表示端口，hot : 是否热重载
现在配置好了，我们还需要建立一个入口文件，index.js,我们就直接建在根目录下面，目录结构：
接下来，我们再对命令行做个修改，打开package.json文件，里面有个scripts属性，我们做个如下配置：
scripts：表示命令行
然后接下来就可以启动服务器了
在DOS系统里面输入：npm start
如果显示以上这种输出结果，表示服务器启动成功，然后打开浏览器，在地址栏中输入：
http://localhost:8083
出现以下结果：
这个时候，已经可以通过地址进行访问了，但是因为根目录下面没有任何可以显示的有效的web文件，所以会显示出当前 的目录，那么接下来在根目录新建一个index.html文件,里面输入一些内容，然后再看效果：
保存后，刷新浏览器
这时候，一个最简单的前端服务器框架已经搭建好了，如何结合vue呢？
第一步：先建立文件的结构目录
这个目录可以根据自己的喜好来建！
下面是我自己建的目录：
对比上面的文件目录，新增了：
src这个文件夹，下面放了三个目录：page, router, static, 两个文件：index.js, app.vue, 上面的index.js 移入到src 里面了
index.html 不变
src ： 这个目录的主要作用就是把所有的前端页面都放里面，其中： page : 用于存放 前端 的模板文件， page 下面的com 目录存放公共的 模板文件，如：通常的header,footer 等，
static ： 目录主要存放静态文件：包括：图片，css,等
rotuer：目录 用于存放路由
app.vue：是vue的入口模板文件
index.js ： 就是入口文件
目录建好后，接下来就是放入内容的时候了，首先来配置 webpack.config.js
webpack.config.js 的代码贴在下面：
///////////////=============开始==================///////////////
const path = require('path')
const htmlPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
// 入口文件
entry:'./src/index.js',
//编译输出配置
output: {
path: path.resolve(__dirname + './dist'), //目录
filename: 'bundle.js', //文件名
publicPath: '/' //根目录
},
devServer:{
port:8083, ///端口
hot:true //是否热重载
},
resolve:{
extensions: ['.js', '.vue'], //js 和 vue 文件在import导入的时候不需要带扩展
alias: {
'vue$': 'vue/dist/vue.esm.js', //vue官方指定写法，如果不写这个，则运行的时候会提示
'@': path.resolve(__dirname, 'src') //给src目录起个别名@ ，引用src目录的时候，可用@替代
}
},
// 下面是loader的配置
module:{
rules: [
{
test: /\.js/,
use: ['babel-loader'],
},{
test: /\.vue$/,
use: ['vue-loader']
},{
test: /\.css$/,
use: ['css-loader']
},{
test: /\.less$/,
use: [
"css-loader",
"less-loader"
]
},{
test: /(\.jpg|\.png|\.jpeg|\.gif)$/i,
loader: 'url-loader',
options:{
limit: 1024,
name: '[name]-[hash:7].[ext]'
}
}
]
},
// 插件的配置
plugins:[
new htmlPlugin({
filename: 'index.html',
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};
///////////////==============结束=================///////////////
index.js 入口文件的代码 贴下：
///////////////==============开始=================///////////////
import Vue from 'vue'
import vueRouter from 'vue-router'
import App from './app'
import router from './router/'
/* 使用vuerouter */
Vue.use(vueRouter);
//实例化vue
new Vue({
el: '#root', //挂载点
router, // 路由
template: '', //模板
// 子组件
components:{
App
}
});
///////////////==============结束=================///////////////
app.vue 入口模板的代码如下
///////////////===============开始================///////////////
<template>
<router-view />
</template>
export default {
data(){
return {
}
}
}
///////////////==============结束=================///////////////
在router 目录下文件：index.js , routes.js,代码 如下：
///////////////===============开始 index.js================///////////////
import Router from 'vue-router'
// ./routes 是一个目录，当import 导入的时候，会自动导入 目录下的index.js
import routes from './routes'
export default new Router({
mode: 'hash',
base: '/',
routes: routes
})
///////////////==============结束=================///////////////
///////////////===============开始 routes.js================///////////////
import Index from '@/page/index'
export default [
{
path: '/',
component: Index
},{
path: '/index',
component: Index
}
];
///////////////==============结束=================///////////////
page 目录下 index.vue 的代码如下
///////////////===============开始================///////////////
<template>
<div>{{index}}</div>
</template>
export default {
data(){
return {
index: 'hello , this is dddindex'
}
}
}
///////////////==============结束=================///////////////
index.html 的代码如下：
///////////////===============开始================///////////////
///////////////==============结束=================///////////////
所有代码贴完，然后运行 ： npm start
用浏览器打开，如下：
剩下的就是加入css等进行页面美化了，可以参照vue 的来写
