当前位置：首页 > news >正文

vue 项目基础搭建

news 来源：原创 2024/5/4 4:14:53

2019独角兽企业重金招聘Python工程师标准>>>

1、安装node

2、设置仓库地址

命令设置

npm config set registry https://registry.npm.taobao.org 

npm info underscore （如果上面配置正确这个命令会有字符串response）

手动设置

编辑 ~/.npmrc 加入下面内容，没有文件创建此文件，文件位置：C:/user/用户名/.npmrc

 registry = https://registry.npm.taobao.org

2、安装webpack

npm install -g webpack

3、安装vue 脚手架

npm install -g vue-cli

4、创建项目app,进入app文件夹内。执行cmd命令

vue init webpack app

5、npm 依赖安装

npm install

6、运行项目

npm run dev

7、项目结构图【取自网络】

.
├── 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                # 构建脚本和依赖关系

8、结构定义

build/

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

config/index.js

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

src/

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

static/

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

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

test/unit

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