安装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里保存一下就可以立马看到网页的自动刷新了:
这里写图片描述

Logo

前往低代码交流专区

更多推荐