zoukankan      html  css  js  c++  java
  • vue学习记录①(vue-cli脚手架构建项目结构)

    我们直接从vue的工程化开始入手。

    在这里用git命令行搭建项目环境。(当然直接cmd命令行下也是一样的)

    git下载安装地址:https://www.git-scm.com/download/win

    git使用教程:http://www.cnblogs.com/havenshen/p/3493522.html

    git常用命令整理:http://www.cnblogs.com/luxiaoxing/p/7545403.html

    1.node安装。

    node下载安装地址:http://nodejs.cn/download/

    注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;

    安装过程就是一直点击Next就好,安装完成后可以在命令行输入node -v查看版本信息。

    2.安装淘宝镜像。在命令行下输入:

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装完成后可以在命令行输入cnpm -v查看版本信息。

    因为npm的服务器在国外,有时候安装依赖的时候会很慢,所以用cnpm来安装依赖会相当快,其用法跟npm一样。(推荐使用cnpm)

    3.安装webpack,在命令行下输入:

    cnpm install webpack -g

    安装完成后可以在命令行输入webpack -v查看版本信息。(如安装错误需全局安装webpack-cli,在命令行输入cnpm install webpack-cli -g)

    webpack详细使用教程请移步:[js高手之路]深入浅出webpack教程系列

    4.安装vue-cli。在命令行下输入:

    cnpm install -g vue-cli  

    安装完成后可以在命令行输入vue -V查看版本信息。

    这个vue-cli呢,是vue的脚手架工具,可以自动生成目录,跟express生成器差不多。

    现在我们就可以用vue-cli脚手架生成一个工程项目了,项目名称是test。

    1.选择或新建一个文件夹作为你的工程项目目录。

    2.在这个指定的文件夹上面右击选中Git Bash就可以打开命令行了(没有安装git的可以cd 切换到你指定的目录下),在命令行下输入:

    vue init webpack test

    这时候会有一些提示你的信息,你只需一直回车即可。如下图test这个项目的基本结构就自动生成了。

    此时我们就可以在指定的文件夹下看到test这个新生成的项目文件夹以及里面的项目结构了。

    3.同时我们在test这个文件夹下打开命令行,安装项目所需的依赖(因为用脚手架的时候会自动构建package.json文件,所以这里直接安装依赖就好)。命令行下输入:

    cnpm install

    安装完成后test文件夹里面会多一个node_modules的文件夹也就是所需的依赖文件了。

    4.运行项目。在test文件夹下打开命令行并输入:

    npm run dev

    服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:

    最后,这个test的项目就用vue-cli脚手架工具构建好了。

    项目部署

    接下来,使用npm run build来部署上线的项目

    npm run build

     生成的dist目录,就是打包构建后的项目目录。

  • 相关阅读:
    Oracle10g服务启动命令
    Linux系统添加永久静态路由的方法
    搭建YUM仓库与定制RPM包
    LVS简介
    【Linux】先添加一块磁盘制作LVM卷并进行分区挂载
    函数部分
    Python中if __name__ == "__main__": 的作用 (整理转自Arkenstone) --感谢!
    python语言基础笔记
    部分示例程序
    转,关于游标
  • 原文地址:https://www.cnblogs.com/luxiaoxing/p/7552612.html
Copyright © 2011-2022 走看看