Vue脚手架

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
例: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脚手架)