【vue3】从0搭建Vue3项目

从0搭建Vue3项目

Vue 的安装和升级

# vue的安装升级
npm install -g @vue/cli

# 查询版本号
vue --version

Vue3 工程创建

# 通过vue-cli快速创建一个vue项目
## 带ui界面(vue version >= 3)
vue ui

## 不带ui界面
### 1. 进入工作路径
vue create project_name
### 2. 选择manually select自行配置
### 3. 可选择配置vue3, ts, prettier, package.json, yarn

打开 demo 工程

cd project_name
yarn serve

🔗 进入链接 : http://localhost:8080/

新建组件

🚀 在 vscode 快速创建:

1. 呼出 vscode 控制台配置 snippets -> vue -> config vue.json(自行增删)

{
  // Example:
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"wrapper\">$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  components: {},",
      "  props: {},",
      "  data() {",
      "    return {",
      "    };",
      "  },",
      "  watch: {},",
      "  computed: {},",
      "  methods: {},",
      "  created() {},",
      "  mounted() {}",
      "};",
      "</script>",
      "<style lang=\"scss\" scoped>",
      ".wrapper{}",
      "</style>"
    ],
    "description": "A vue file template"
  }
}

2. 在components目录下新建一个.vue文件, 可直接快捷导入snippets配置