zoukankan      html  css  js  c++  java
  • vue-cli开发-搭建项目(一)

    前言

    vue-cli是Vue官方提供的命令行工具,可用于快速搭建大型单页应用。集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。建议先熟悉 Vue 本身之后再研究 CLI。
    使用之前需要对 Node.js 和相关构建工具有一定程度的了解。

    安装

    先决条件:Node.js(> = 4.x,6.x首选),npm版本3+和Git。

    注:建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。
    npm config set registry https://registry.npm.taobao.org //更换国内淘宝的镜像
    注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
    cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

    全局安装vue-cli
    npm install -g vue-cli

    创建项目

    了解官方模板

    Vue官方为我们提供了几种模板,方便我们进行快速开发。根据需要选择适合自己的模板。
    当前可用的模板包括:
    webpack - 一个全功能的Webpack + vue-loader设置,具有热重新加载,linting,测试和css提取。
    webpack-simple - 一个简单的Webpack + vue-loader设置,用于快速原型制作。
    browserify -全功能Browserify + vueify设置用热重装载,掉毛&单元测试。
    browserify -simple - 一个简单的Browserify + vueify设置,用于快速原型制作。
    pwa - 基于webpack模板的vue-cli的PWA模板
    simple - 单个HTML文件中最简单的Vue设置

    提取模板创建项目

    安装完vue-cli脚手架之后,我们就可以开始创建自己的项目。
    用法vue init < template-name > < project-name >
    使用方法vue init webpack my-project
    上述命令从vuejs-templates / webpack中提取模板,提示输入一些信息,并在其中生成项目./my-project/。
    命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图
    图片描述

    当然这些都看你自己的爱好了。
    最后生成 Vue.js 的webpack 项目

    命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图
    图片描述

    当然这些都看你自己的爱好了。

    安装依赖

    项目创建完成之后可以看到目录结构如下
    图片描述

    接下来使用命令行工具
    cd vuedemo//CD我的项目
    npm install//NPM安装依赖
    图片描述

    可以在项目目录里直接安装,是因为有package.json这个文件,里面包含了需要安装的包的名称。安装完成后,可以在目录中发现多出了node_modules这个文件夹,里面为下载的依赖。

    运行项目

    使用命令行工具cmd,到项目所在目录下,输入npm run dev,回车,启动项目
    到此项目已经搭建完成,便可以在D:vuedemosrc目录下进行开发

    项目打包

    运行npm run build
    运行后打包成功会在项目中生成dist文件夹
    部署服务器是把文件夹中的文件丢上服务器即可

  • 相关阅读:
    Step By Step(Lua-C API简介)
    Step By Step(Lua系统库)
    复制控制( 下 ) --- 自定义析构函数
    复制控制( 中 ) --- 重载赋值运算符
    复制控制( 上 ) --- 自定义复制函数
    泛型算法结构
    流迭代器 + 算法灵活控制IO流
    一个文本查询程序的实现
    multimap容器和multiset容器中的find操作
    实用的关联容器
  • 原文地址:https://www.cnblogs.com/Tohold/p/9546463.html
Copyright © 2011-2022 走看看