vue-cli_项目运行(一)

序:初识框架,直接使用了vue-cli构建项目,了解运行加载原理

主:逻辑理解

【1】通过命令行生成的项目中，项目结构如下

 

【2】直接查看打包文件package.json ,启动执行的命令是npm run dev，dev对应的值是

webpack.dev.conf.js 这份文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

 

【3】在当前目录打开该文件可以看到头部那里，其引入了webpack.base.conf这份文件，在同级目录下

const baseWebpackConfig = require('./webpack.base.conf')

 

【4】在当前目录打开该文件可以看到，入口entry这里引入了main.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

 

【5】main.js作为入口文件，实例化应用，引入了App.vue核心模块

【6】App.vue相当与是一个载体，所有页面只是数据源，将在这里进行切换，<router-view/>标签将告诉它接下来去那里，这里为默认路由，因此直接看route中默认指定

【7】route文件夹下的index.js进行了路由配置，path: '/'栏为默认，component引入组件视图，由此显示为用户所看到

额:vue+webpack的项目[来源可能网络或其他],下载下来的项目中是运行不了的(也可能场景不同,我遇过两次),外来项目一般先执行npm install,安装依赖,优先查看打包文件package.json中相关启动命令,遇到过项目中少了个build文件夹的,buildz中是放置配置项目的文件,可以尝试将新建vue-cli项目的build文件夹拷贝过来,原理差不多,根据报错提醒再细微做修改