Vue-cli 3.0

作者: Grayly吖 | 来源:发表于2019-05-02 01:11 被阅读315次

一、vue-cli 3.0(vue脚手架3.0)

1、Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统

2、使用vue-cli脚手架创建项目

  • (1)全局安装脚手架
    npm install -g @vue/cli
  • 输入:vue -V,检查是否安装成功
  • (2)创建Vue项目的两种方式
    • (2.1)使用命令创建项目
    vue create hello-world(项目名称)
  • (2.2)使用图形界面创建项目
    • 开启图形界面:vue ui
  • (2.3)启动项目
     npm run serve(serve根据自己在package.json中的命名,一般默认serve)
Hello Vue

3、项目目录基本结构

  • (1)package.json:主要用来定义项目中需要依赖的包
  • (2)babel.config.js:编译es6用的,把es6转变成js5
  • (3)gitignore: git忽略的文件或文件夹
  • (4)src:源代码存放的地方
  • (5)public:放置公共的文件

4、其他设置

  • (1)在图形界面中启动项目和打包项目
  • (2)运行打包后的文件需要启动一个服务,不然直接打开会报错
    • npm i http-server -g
    • 在打包后的目录(本项目是dist), 打开命令提示符
    • 输入http-server -o
  • (3)在图形界面中安装项目需要的依赖
  • (4)查看webpack在项目中的配置(webpack默认被隐藏)
    • (4.1)在控制台查看:vue inspect
    • (4.2)把配置输出到out.js文件查看:vue inspect>out.js
  • (5)可以对项目中的webpack新增配置
    • 新增配置文件:vue.config.js
    • 要跟package.json在同一目录下,与配置webpack.config.js同理

二、快速原型开发(用vue脚手架打开组件)

1、vue serve

2、安装工具

     npm install -g @vue/cli-service-global

3、使用

  • (1)制作小组件App.vue
     <template>
       <h1>Hello!</h1>
     </template>
  • (2)然后在这个 App.vue 文件所在的目录下运行
     vue serve App.vue

4、启动项目的多种方式

  • vue serve 使用了和 vue create 创建的项目相同的默认设置(webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件,这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口,则会使用 src/App.vue
  • (1)npm run serve(完整的项目)
  • (2)vue serve src/main.js
  • (3)vue serve App.vue

相关文章

网友评论

    本文标题:Vue-cli 3.0

    本文链接:https://www.haomeiwen.com/subject/zargnqtx.html