安装Vue脚手架

前言

创建Vue项目之前需要先安装NodeJS。安装记录Node.js安装记录

安装Vue脚手架

进入vue官网
vue官网：https://cn.vuejs.org/

点击Vue CLI

查看具体文档内容

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

笔者安装的是4.5.15

npm --registry https://registry.npm.taobao.org  install -g @vue/cli@4.5.15

查看vue版本

vue --version

BUG
关于‘vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件的解决办法

创建Vue项目

创建Vue项目

md vueDemo # 新建文件夹
cd vueDemo  #进入此文件夹
vue create demo # 创建demo文件

选用Default的即可

使用Vscode打开demo项目
在vscode终端中输入

npm run serve

进入http://localhost:8080/

✳退出按键ctrl+c

简单入门案例

demo项目文件结构

App.vue

<template>
  <div id="app">
    <Student></Student> 

  </div>
</template>

<script>
//导入Student组件
import Student from './components/Student.vue'

export default {
  name: 'App',
  components: { //添加组件
    Student  
  }
}
</script>

<style>

</style>

Student.vue

<template>
    <div>
        <h1>{{name}}</h1>
        <button @click="tanchuang"> 弹窗 </button>
        <div>
            <input v-model="number"/>
        </div>
    </div>
</template>

<script>
export default {
  data(){
    return {
        name:"pengge666",
        number:123
    }
  },
  methods: {
    tanchuang(){
        alert("Hello world!")
    }
  },
}
</script>

<style>
</style>

简单补充一下其他前端框架安装
Bootstrap安装
进入项目文件夹

npm --registry https://registry.npm.taobao.org install bootstrap@5.2.0-beta1

项目中导入即可

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

element-ui包

npm --registry https://registry.npm.taobao.org install element-ui

在main.js中写入以下内容

import Vue from 'vue';
import App from './App.vue';     
import 'element-ui/lib/theme-chalk/index.css';       //引入样式
import ElementUI from 'element-ui';      //引入组件，还要注册


Vue.use(ElementUI);          //注册需要的组件

new Vue({
  el: '#app',
  render: h => h(App)
});

引入 Element 完整引入 Element 按需引入组件