Vue学习---项目创建

一、项目创建与启动
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 挂载

image

2.main.js

image

render:

image

其他写法：

image.png

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

3.App.vue

4.项目首页构成

image.png

三、项目目录结构

image

二、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）点击设置选择应用到包含的项目

image