Vue.js 03 Vue-Cli

最新推荐文章于 2021-12-16 21:56:19 发布

loetca

最新推荐文章于 2021-12-16 21:56:19 发布

阅读量199

点赞数

分类专栏： Vue.js 文章标签： vue-js 前端开发 JavaScript webpack

本文链接：https://blog.csdn.net/adsl624153/article/details/80153534

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、简介

这里从官网摘录
Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack [项目名]

# 安装依赖，走你
$ cd [项目名]
$ npm run dev

2、初始化项目时的步骤

? Project name ([项目名])
⑴ 项目的名字【回车继续】

? Project description (A Vue.js project)
⑵ 项目的描述【回车继续】

? Author
⑶ 作者

? Install vue-router? (Y/n)
⑷ 是否安装路由

? Use ESLint to lint your code? (Y/n)
⑸ 是否使用ESLint来规范代码
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
  使用标准的ESLint语法检测即可

? Set up unit tests (Y/n)
? Setup e2e tests with Nightwatch? (Y/n)
⑹ 是否需要自动化测试工具【可以选择n】

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
⑺ 采用什么形式安装依赖【使用NPM即可】

最后提示：

# Project initialization finished!
# ========================

To get started:

  cd [项目名]
  npm run dev

执行启动命令后，看到：

 DONE  Compiled successfully in ???ms
 I  Your application is running here: http://localhost:8080

index.html

打开浏览器可以看到这个界面，表示项目启动成功

3、项目目录说明

⑴ build

放置项目的webpack配置文件

⑵ config

针对开发环境和线上环境的配置文件

⑶ node_modules

项目的依赖

⑷ src

源代码所在目录

⑸ static

放置静态资源

⑹ .babelrc、.editorconfig、.eslintignore、.eslintrc

针对.babelrc的编译，浏览器的配置，以及ESLint语法检查规则的说明

⑺ index.html

整个项目的首页

4、关于代码的编写

主要是编写src目录下的文件

⑴ 查看index.html

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

可以看到它有一个叫app的挂载点

⑵ 查看main.js

  import Vue from 'vue'
  import App from './App'
  import router from './router'

  Vue.config.productionTip = false

  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })

它是整个项目的入口文件，它创建了一个Vue实例，并注册了当前目录下的名为App的局部组件，这里使用的是ES6的语法规则，完整的组件属性为：