搭建vue项目

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

> 1，安装好node.js  npm

> 2，创建vue项目：
> 
>     npm install -g vue-cli            /*搭建脚手架*/
>     vue init webpack my-project       /*初始化项目名*/
>     cd my-project                     /*进入项目*/
>     npm install                       /*安装依赖*/
>     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/`

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

`config/index.js`

这是显示构建设置的一些最常见配置选项的主配置文件。 有关详细信息，请参阅开发期间的API代理和后端框架集成。

`src/`

这是你的大部分应用程序代码所在的位置。如何构建此目录中的所有内容，主要取决于您; 如果您使用Vuex，您可以查阅Vuex应用程序的建议。

`static/`

此目录是您不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。

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

`test/unit`

包含单元测试相关文件。 有关详细信息，请参阅单元测试