前言

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

安装Vue脚手架

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

点击Vue CLI

查看具体文档内容

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

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

笔者安装的是4.5.15

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

查看vue版本

vue --version
1

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

创建Vue项目

创建Vue项目

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

手写脚手架vue视频.txt

txt 0星 超过10%的资源 147.0B

下载

选用Default的即可

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

npm run serve
1

进入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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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

项目中导入即可

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

element-ui包

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

在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)
});
1
2
3
4
5
6
7
8
9
10
11
12

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