美文网首页
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脚手架

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