美文网首页
Vue脚手架

Vue脚手架

作者: goodluckall | 来源:发表于2018-02-01 11:10 被阅读0次

1. NPM

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm,所以只要安装node.js就可以了,npm也包含在内一并安装好了。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。
安装node.js步骤

1.进入cmd命令面板,输入node -v检测是否安装,出现版本号则为安装成功。
2.如果没有安装则输入 node install 安装node
3.输入node -v检测是否安装,出现版本号则为安装成功。

淘宝的npm为cnpm
淘宝镜像安装
淘宝镜像官网

2.vue-cli

安装vue-cli官方脚手架步骤:分为全局安装和局部安装
局部安装
1、直接全局安装
npm install -g vue-cli
2、然后打开npm命令行工具,cd到你想要的某个目录中,并输入:
vue init <template-name> <project-name>
例:vue init webpack "sell-app"
配置脚手架
配置项目信息

  • Project name: 项目名字
  • Project description: 项目描述
  • Author: 项目作者
  • Vue build: 创建方式,直接回车选择官方推荐的
  • Install vue-router?yes 是否引入vue路由,y

3、

  • Use ESLint to lint your code?yes 是否引入eslint代码检查,是
  • Pick an ESLint preset none esline风格,选无
  • Setup unit tests with Karma + Mocha? no引入单元测试工具,否
  • Setup e2e tests with Nightwatch? 引入自动化测试工具,否

配置完后会提示如何启动这个项目:
To get started:
cd app(进入项目文件夹)
npm install (安装所需依赖)
npm run dev (启动服务器)
自动打开项目页面
按照它的提示输入命令,一般只要输入进入文件下输入nmp run dev就可以
4、目录结构

  • build:最终发布的代码存放位置。
  • config:配置目录,包括端口号等。我们初学可以使用默认的。
  • node_modules:npm 加载的项目依赖模块
  • src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包* 含了几个目录及文件:
  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使components 目录。
  • main.js: 项目的核心文件。
  • static:静态资源目录,如图片、字体等。
  • test:初始测试目录,可删除
  • .xxxx文件:这些是一些配置文件,包括语法配置,git配置等。
  • index.html:首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
  • package.json:项目配置文件。
  • README.md: 项目的说明文档,markdown 格式

5、在Cli 里创建组件,和引用组件
6、在components下创建组件:
7、在App.vue导入和应用组件:
8、最后执行 npm run dev,不能关掉命令框。

相关文章

  • Vue脚手架: vue-cli@3.0.5

    Vue脚手架vue-cli3.0.5 脚手架安装 脚手架vue-cli3.0.5的使用 2.创建vue项目 开发环...

  • 使用vue-cli搭建vue项目

    vue-cli vue的脚手架 安装脚手架之前需要安装node.js 安装脚手架 安装vue-cli 创建vue项...

  • Vue脚手架Element-UI

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。A.安装3.x版本的Vue脚手架:npm instal...

  • vue 中的npm 的一些安装

    vue脚手架 vue-cli vue脚手架 包的安装 @(指定版本) 脚手架的两种模式 sass vuex B...

  • class1 vue cli3安装

    vue工程脚手架 关闭vue脚手架的eslint 启动vue ui服务 终端输入vue ui,启动vue项目管理器...

  • VUE----使用脚手架创建vue项目

    学习了vue的基础之后尝试使用脚手架创建一个vue项目 1.全局安装vue脚手架: 安装完成之后,vue脚手架文件...

  • 脚手架

    安装脚手架:vue -处理(脚手架) cnpm install vue-cli -gwe...

  • 纯webpack搭建vue脚手架,单页面应用

    # vue脚手架 ## 说明 ``` vue webpack 自定义脚手架,单页面应用, 支持多进程打包 vue ...

  • Vue脚手架

    5.1 介绍并安装3.x版本的vue脚手架 脚手架基本用法介绍Vue脚手架: 用于快速生成 Vue 项目基础架构理...

  • 03、Vue-cli构建项目

    一、Vue-cli脚手架工具 Vue-cli是Vue的脚手架工具,是官方命令行工具 (CLI),脚手架即编写好基础...

网友评论

      本文标题:Vue脚手架

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