一、项目创建与启动
1. 项目创建
1)cd 本地目录:
cd /Users/xxxx/Desktop/
2)创建项目test-demo:
vue create test-demo
2.启动项目
1)进入test-demo项目文件夹:
cd /Users/xxxx/Desktop/ test-demo
2)运行项目
npm run dev 或 npm run serve
二、项目的运行
1.index.html(项目的运行入口)
主要是提供一个 div 给 vue 挂载

2.main.js

render:

其他写法:

在main.js中,新建了一个vue实例,并把App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签。也就是说通过main.js我们关联到App.vue组件,接着,我们继续看一下App.vue组件中的内容。
3.App.vue
4.项目首页构成

三、项目目录结构

二、MAC VScode开发工具的必备操作
1.呼出vscode控制台:cmd+shift+Y
2.唤起搜索框:cmd+shift+P 搜锁安装Shell command 'code-insiders' successfully installed in PATH.
3.可能遇上保存或新建文件权限不需要的操作,错误提示如下
Failed to save '***.js': Insufficient permissions. Select 'Retry as Sudo' to retry as superuser
解决方法:1)点击文件,2)找到“显示简介"进入,3)找到“共享与权限”,修改访问权限。4)点击设置选择应用到包含的项目

网友评论