20220719暑假实习笔记

上课主要内容：
7.1. 1-Vue介绍和开发环境搭建
7.2. 2-Vue-Cli的HelloWorld程序
7.3. 3-Vue的基本代码和插值表达式

– 新版本node.js创建项目命令,旧版本执行vue ui后web界面创建；
VS Code终端下执行命令：
D:\vs-work> vue create hello-vue
回车

– 7.1. 1-Vue介绍和开发环境搭建

vue初体验，新建一个index.html,应用vue
vue开发工具，Visual Studio Code ,分布式开源前端开发工具

vue运行环境： node.js npm ***** 难度

先安装vue运行环境，安装 node-v16.15.1-x64.msi
配置node.js环境变量
命令行任意位置输入如下命令显示版本号,运行node -v,npm -v
配置node.js的全局安装目录及缓存目录
安装cnpm,验证cnpm安装是否成功

Visual Studio Code 安装 * 难度
傻瓜式安装
安装好vs code的常用插件，10个

– 查看vue-cli脚手架版本号命令：

C:\Users\tangluyao>npm list vue -g
D:\nodejs\node_global
±- @vue/cli@5.0.7

升级脚手架版本命令
npm i -g @vue/cli@5.0.7

创建项目的方式有2种：
1.命令行执行： vue create projectName 如 vue create 01-hello-vue
D:\vs-work> vue create 04-vue-demo ；选择 vue2.0回车即可
2. vue ui启动以图形化界面创建和管理项目
按照老师演示完成

创建好项目，怎么启动，怎么停止项目？
Vs Code工具下新建一个终端，在当前目录vs-work下切换到项目目录
D:\vs-work> cd .\03-vue-demo
下一步，运行项目：
D:\vs-work\03-vue-demo> npm run serve
– 跟package.json文件中scripts对象的第一个参数有关，若改为 dev,则启动命令为
npm run serve --> npm run dev
启动完毕后，会自动生成访问地址URL
若修改为 “dev”: “vue-cli-service serve --open”, 会自动弹出目标页面

CTRL + C 停止项目
cls:  清理屏幕

课间练习：
15:30上课，大家练习一下用vue ui及vue create两种方式创建项目

– 截止目前，学习了那些vue命令：

查看组件版本号
命令行任意位置输入如下命令显示版本号： v16.15.1 ，8.13.2 ,cnpm@8.2.0
node -v
npm -v
cnpm -v

创建项目
vue create 项目英文名
vue ui

项目启动与停止
npm run serve
CTRL + C 停止项目
cls: 清理屏幕

代码版本管理工具：免费，开源
Git ： Linux之父开发
Svn ： SVN是subversion的缩写，是一个开放源代码的版本控制系统

– 最后一节课：

06:06-vue的基本代码结构和插值表达式
布置作业