Vue-cli 脚手架创建以及打包发布项目node.然后选择确认项目名以及项目描述，作者，是否使用路由，测试等等。然后项

文章目录

准备环境

我这边已经准备好

node.js
npm
webpack 打包工具
vue-cli vue 脚手架

在这里插入图片描述

下载模板

然后利用vue-cli 脚手架下载vue模板项目

输入命令：

vue init webpack 项目名

然后选择确认项目名以及项目描述，作者，是否使用路由，测试等等。
在这里插入图片描述

完成之后开始进行下载

在这里插入图片描述

下载完成后命令行会提示

在这里插入图片描述

运行项目

切换到创建好的项目中

运行命令 npm run dev 启动项目

在这里插入图片描述

然后项目启动成功，我这里是8081 端口，原因是我8080已经启动了一个Vue项目了。

打开浏览器访问 http://localhost:8081/

出现下面页面表示项目构建和启动成功
在这里插入图片描述

用webstorm 打开可以看到项目结构

在这里插入图片描述

这里我再创建一个项目vue-demo，照着此脚手架写一个helloworld

项目结构

在这里插入图片描述

创建一个子组件

HelloWorldTest.vue

<!--组件：局部页面的功能模板。由 template，script，style 三部分组成-->
<!--模板-->
<template>
<!--  必须有根标签-->
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  // 固定写法，向外暴露一个page对象
export default { //配置对象（与vue一致）
  name: 'HelloWorldTest',
  data () { // 组件里必须写函数
    return {
      msg: 'hello world and vue Component ..... '
    }
  }
}
</script>

<style>
h1 {
  font-weight: normal;
}
hello a {
  font-size: 30px;
  color: #42b983;
}
</style>

根组件

App.vue

<!--根组件-->

<template>
  <div id="app">
    <img src="./assets/logo.png" alt="logo">
<!--    3 、 使用组件标签-->
    <HelloWorldTest/>
  </div>
</template>

<script>
  //1 、 引入子组件
import HelloWorldTest from './components/HelloWorldTest'

export default {
  name: 'App',
  // 2 、映射组件标签
  components: {
    // HelloWorldTest:HelloWorldTest.vue
    HelloWorldTest
  }
}
</script>

<style>
#app {
  text-align: center;
  width: 200px;
  height: 400px;
  background-color: aquamarine;
  color: #2c3e50;
  margin-top: 60px;
  margin-left: 45%;
}
</style>

入口函数



/*
    入口js: 创建Vue实例
 */
//引入vue
import Vue from 'vue'
//引入 根组件
import App from './App.vue'

Vue.config.productionTip = false


new Vue({
  //绑定dom
  el: '#app',
  // 映射标签
  components: { App },
  //使用组件标签
  template: '<App/>'
})

首页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>