vue（一）vue项目结构

安装 Vue

npm install -g @vue/cli
vue --version

创建vue项目

vue create vue-demo

运行项目

cd vue-demo
npm run serve

安装vue高亮插件：vscode安装 volar

项目结构

Vue的默认包管理器为 yarn。。如果你此后需要使用不同的包管理器，则可以在运行 vue create 时传入参数 --packageManager=<package-manager>。因此，如果你想要使用 npm 创建 moz-todo-vue 项目，并且之前选择了 yarn，则应运行 vue create moz-todo-vue --packageManager=npm。

• package.json：该文件包含项目的依赖项列表，以及一些元数据和 eslint 配置。 package.json文件解读 https://juejin.cn/post/7145759868010364959 

• yarn.lock：如果你选择 yarn 作为你的包管理器，将生成此文件，其中包含项目所需的所有依赖项和子依赖项的列表。解读 https://juejin.cn/post/6943034389043347486

• babel.config.js：这个是 Babel 的配置文件，可以在开发中使用 JavaScript 的新特性，并且将其转换为在生产环境中可以跨浏览器运行的旧语法代码。你也可以在这个里配置额外的 babel 插件。

• jsconfig.json：这是一份用于 Visual Studio Code 的配置文件，它为 VS Code 提供了关于项目结构的上下文信息，并帮助自动完成。解读 https://juejin.cn/post/7004748084374831117

• public：这个目录包含一些在Webpack编译过程中没有加工处理过的文件（有一个例外：index.html 会有一些处理）。

  • favicon.ico：这个是项目的图标，当前就是一个 Vue 的 logo。

  • index.html：这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。

    备注： 这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。

• src：这个是 Vue 应用的核心代码目录

  • main.js：这是应用的入口文件。目前它会初始化 Vue 应用并且制定将应用挂载到 index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。

  • App.vue：这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。

  • components：这是用来存放自定义组件的目录，目前里面会有一个示例组件。

  • assets：这个目录用来存放像 CSS、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。

    备注： 根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 views 的文件夹）。