笔记：webpack 创建Vue项目

安装NodeJS
打开cmd（或新建文件夹，在webstorm中打开，使用Webstorm的Terminal命令行）确保已安装Nodejs

全局安装webpack

npm install webpack -g

若使用淘宝镜像，则先安装淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

再安装webpck：

cnpm install webpack -g

创建模板项目

vue init webpack-simple 工程名字<工程名字不能用中文>
若创建 vue1.0 的项目：
vue init webpack-simple#1.0 工程名字

然后会有配置信息的提示，根据自己的需要填写或略过（如最后一项问是否使用sass，默认是No，我的项目中需要用到，就手动选择Y），配置完成后如下（忽略webstorm Terminal下的中文乱码）：
这里写图片描述

执行完成后项目文件中目录如下：

这里写图片描述

运行模板项目
然后根据上个操作后的提示（ To get started），依次执行

     cd HT
     npm install
     npm run dev

npm install 执行完项目目录中会增加node_modules文件夹：
这里写图片描述
（一般情况下，当我们从网上拿到一个别人的vue 实例demo的时候，运行demo也是这几步操作）。

最后执行npm run dev，结果如下：
这里写图片描述

项目运行的端口为 http://localhost:8080/
此时在浏览器中打开，模板页面就出来了！
这里写图片描述

关于目录结构
参考菜鸟教程：菜鸟教程
这里写图片描述

写个组件
（一）参考App.vue中的格式写个组件：
在src文件夹下新建文件夹component，新建vue文件testComponent.vue：

<!-- testComponent.vue -->
<template>
  <div class="strong">
    <h1>Here you go.</h1>
    <p>Something to say: {{ Msg }} </p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        Msg: "Tsukiis Fight!"
      }
    }
  }
</script>

<style>
  .strong{
    padding: 1em 0;
    background: linen;
  }
</style>

这里写图片描述

关于组件中的数据，需要注意：
参考： Vue 代码风格指南
这里写图片描述

（二）引入组件
“App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录”。
我们就在App.vue 文件的里面引入：

import testComponent from './component/testComponent.vue'

（三）注册组件
在App.vue 中 data 属性后面加上 components: { testComponent}：

<script>
import testComponent from './component/testComponent.vue'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: { testComponent }
}
</script>

（四）使用组件
在App.vue中 template里加入引入的组件 <testComponent></testComponent>
这里写图片描述

webstorm里保存一下就可以立马看到网页的自动刷新了：
这里写图片描述

笔记：webpack 创建Vue项目

猜你喜欢