搭建vue项目

待我称王封你为后i 2022-05-10 09:12 418阅读 0赞

1,安装好node.js npm

2,创建vue项目:

  1. npm install -g vue-cli /*搭建脚手架*/
  2. vue init webpack my-project /*初始化项目名*/
  3. cd my-project /*进入项目*/
  4. npm install /*安装依赖*/
  5. npm run dev /*启动项目*/

.
├── build/ # webpack配置文件
│ └── …
├── config/
│ ├── index.js # 主要项目配置
│ └── …
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 主应用程序组件
│ ├── components/ # ui组件
│ │ └── …
│ └── assets/ # 模块资源(由webpack处理)
│ └── …
├── static/ # 纯静态资源(直接复制)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── index.js # 测试构建条目文件
│ │ └── karma.conf.js # 测试跑步者配置文件
│ └── e2e/ # e2e测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── custom-assertions/ # e2e测试的自定义断言
│ │ ├── runner.js # 测试跑步脚本
│ │ └── nightwatch.conf.js # 测试跑步者配置文件
├── .babelrc # babel 配置
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # editor 配置
├── index.html # index.html模板
└── package.json # 构建脚本和依赖关系

3,讲解项目结构

build/

  1. 此目录包含开发服务器和生产webpack构建的实际配置。 通常,您不需要触摸这些文件,除非您要自定义Webpack加载器,在这种情况下,您应该看看build / webpack.base.conf.js

config/index.js

  1. 这是显示构建设置的一些最常见配置选项的主配置文件。 有关详细信息,请参阅开发期间的API代理和后端框架集成。
  2. `src/`
  3. 这是你的大部分应用程序代码所在的位置。如何构建此目录中的所有内容,主要取决于您; 如果您使用Vuex,您可以查阅Vuex应用程序的建议。
  4. `static/`
  5. 此目录是您不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。

有关详细信息,请参阅处理静态资产。

  1. `test/unit`
  2. 包含单元测试相关文件。 有关详细信息,请参阅单元测试
  3. `test/e2e`
  4. 包含e2e测试相关文件。 有关详细信息,请参阅端到端测试。

index.html

  1. 这是我们的单页应用程序的模板index.html 在开发和构建期间,Webpack将生成资产,并将生成的资产的URL自动注入到此模板中以呈现最终的HTML
  2. `package.json`
  3. 包含所有构建依赖项和构建命令的NPM软件包元文件。

发表评论

表情:
评论列表 (有 0 条评论,418人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue项目环境

    [vue-用Vue-cli从零开始搭建一个Vue项目][vue-_Vue-cli_Vue]   Vue是近两年来比较火的一个前端框架(渐进式框架吧)。 Vue两大核心思想