Vue工程创建教程

环境准备

• 安装NodeJs
  • 百度搜索安装
  • cmd中node -v验证安装完成

• 配置npm的全局安装路径
  • cmd, 管理员运行
  • 指令npm config set prefix “D:\nodejs”
  • 验证成功 : npm config get prefix
• 切换npm的淘宝镜像
  • npm config set registry https://registry.npm.taobao.org
• 安装脚手架vue-cli
  • 命令行 : npm install -g @vue/cli
  • 验证完成 : vue --version

Vue项目创建

• 创建文件夹vue
  • 进入cmd
  • 执行vue ui
• 创建项目, 把git取消掉
  • 选择:手动
  • 勾选router
  • 选择2.x
  • select : 选择第一个即可
• 在cmd要按一下回车, 等待创建完成,
• 用vscode打开创建完成之后的文件夹
• 运行
  • 在vscode的左下角的npm的service,点击运行按钮即可 (没有npm, 解决方法 : 查看-打开视图-npm)
  • ctrl + C停止运行
• 修改端口号
  • vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //修改端口号
  devServer:{
    port : 7000
  }
})

.

App.vue案例

<template>
  <div>
    <h1>{{message}}</h1>
  </div>
</template>

// script标签要选择后面的vue
<script>
  export default {
    // 这个data是, data : function() 的简写
    data() {
      return {
        message : "hello Vue"
      }
    },
    methods : {
      
    }
  }
</script>


<style>
</style>