使用vue脚手架创建webpack项目

准备工作,安装webpack vuecli.

npm install webpack -g

npm install -g @vue/cli init

在目标文件执行cmd命令,vue init webpack vuedemo,失败:

F:\vue\vue01>vue init webpack my-project

   vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, statusCode=400

换一个命令,使用离线的webpack包:vue init webpack vuedemo --offline

F:\vue\vue01>vue init webpack vuedemo --offline
> Use cached template at ~\.vue-templates\webpack

   vue-cli · Local template "C:\Users\Administrator\.vue-templates\webpack" not found.

提示我们未找到,从https://github.com/vuejs-templates/webpack下载,放到C:\Users\Administrator.vue-templates\webpack目录下,
再次执行vue init webpack vuedemo --offline成功.

在项目文件路径下执行cmd命令 npm run dev 启动成功.

创建完成后目录结构如下:

-build 是打包工具webpack相关的文件
-config 是配置信息
-node_modules 当前项目的所有依赖
-src 编写代码的文件夹
-main.js 主程序文件
-static 静态文件
-package.json npm依赖包的信息
-package-lock.json npm依赖包的详细信息
-index.html 主页面

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,//路由 import导入
  components: { App },//组件 import导入
  template: '<App/>'//模板 import导入 用于渲染的模板
})

模板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>