2019独角兽企业重金招聘Python工程师标准>>>
(1)初始化项目
1 使用vue-cli初始化项目
vue init webpack my-renren
得到以下输出:
? Project name my-renren
? Project description A Vue.js project
? Author neumeng <404879269@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "my-renren".# Installing project dependencies ...
# ========================npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.> uglifyjs-webpack-plugin@0.4.6 postinstall E:\VisualStudioCodeProjects\my-renren\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 1126 packages from 646 contributors in 318.991s# Project initialization finished!
# ========================To get started:cd my-renrennpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack
得到的目录结构如下表:
Name | Description |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块 |
src | 这里是我们要开发的目录,基本上要做的事情都在这个目录里。 |
static | 静态资源目录,如图片、字体等 |
.babelrc | babel配置文件 |
.editorconfig | 编辑器配置文件 |
.gitignore | git忽略配置文件 |
.postcssrc.js | postcss配置文件 |
index.html | 首页入口文件 |
package-lock.json | 记录当前状态下实际安装的各个npm package的具体来源和版本号 |
package.json | 项目配置文件 |
README.md | 项目的说明文档,markdown 格式 |
其中,src
目录里面包含了几个目录及文件:
- assets:放置一些图片,如logo等。
- components:目录里面放了一个组件文件,可以不用。
- App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
- main.js: 项目的核心文件。