使用Visual Studio Code编写第一个Vue

一.准备工作

1.安装Visual Studio Code(官方推荐)

2.打开Visual Studio Code,安装插件(编辑器左边的那几个正方形拼接的图形)

1) Vetur:联想一些Vue文件模板

2) Live Server 及时浏览页面

3) Turbo Console Log 自动打印语句

4) Import Cost 显示导入的npm包的大小

5) es6-string-html 高亮显示语法

3.打开菜单栏点击"终端">"新建终端"

1)查看版本

在终端dos窗口输入:

node -v

npm -v

如果没有显示版本号,就需要就行对应内容的安装.

2) 安装@vue/cli,在终端dos窗口输入:

npm install -g @vue/cli

3) 创建项目

在你准备放置项目的地方创建一个文件夹,例如:D:\VSCodeProject

在终端转入到你创建项目的文件夹,继续在终端输入:

npm init vite@latest  demo1 -- --template vue 

或者

npm init vue@latest

 继续在终端输入:

cd <你的项目名称,用英文>

npm install

npm run dev

 4) 打开你创建的项目

5) 发布到生产环境,安装lodash-es

打开文件夹(项目)后,继续点击终端,并输入:

npm run build

npm i lodash-es

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

二. 浏览器地址栏输入http://localhost:5173/查看页面

三.查看你的代码

在开打的文件中,我们先关注一下三类文件

1)  vue组件

 src/components/HelloWorld.vue  : 子组件

 src/App.vue :父组件,引用了HelloWorld.vue

2) src/main.js 将组件加载到页面的一个对象.

3) index.html 引用main.js,利用其将vue组件加载到页面.

 四. 编写简单vue代码

在components文件夹下创建:child.vue文件,代码由两部分组成,js和template(也就是html代码)

js是由vue框架书写,负责数据和逻辑,template负责内容的呈现.

具体代码如下.

在src文件夹下创建index2.html文件,内容如下: