vue-cli构建vue项目的步骤详解

$ npm install -g vue-cli

$ vue --version
3.3.0

$ vue init webpack hello-vue

? Project name hello-vue # 项目名称
? Project description A Vue.js project # 项目描述
? Author Deepspace <cxin1427@gmail.com> # 作者
? Vue build standalone # 运行+编译时
? Install vue-router? Yes # 安装 vue-router
? Use ESLint to lint your code? Yes # 使用 ESLint 作为代码规范
? Pick an ESLint preset Airbnb # 选择 Airbnb 的代码规范
? Set up unit tests Yes # 安装单元测试
? Pick a test runner karma # 测试模块
? Setup e2e tests with Nightwatch? Yes # 安装 e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，npm

# Project initialization finished!
# ========================

To get started:

 cd hello-vue
 npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

$ cd hello-vue
$ npm run dev

{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  }
}

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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>',
});

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App',
};
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld,
  },
 ],
});

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/about',
   name: 'about',
   component: About
  },
  {
   path: '/vue',
   name: 'vue',
   component: Vue
  }
 ]
})

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld,
  },
  {
   path: '/about',
   name: 'about',
   component: About,
  },
  {
   path: '/vue',
   name: 'vue',
   component: Vue,
   children: [
    {
     path: '/demo',
     component: demo,
    },
    {
     path: '/project',
     component: project,
    },
   ],
  },
 ],
});