一.准备工作
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负责内容的呈现.
具体代码如下.