zoukankan      html  css  js  c++  java
  • vue知识掌握(一)

    vue项目的搭建

    本文章主要讲述vue项目的搭建,在搭建vue项目前需要准备一些材料。

    1.node安装

    npm:在你安装node的时候一般node已经自带了npm,所以忽略。

    webpack:npm install webpack -g

    检验安装是否成功的办法:

    检验node:node -v

    检验npm:npm -v

    检验webpack:webpack -v

    2.安装vue-cli(vue脚手架)

    npm install --global vue-cli

    接下来就是正式的开始搭建项目了。

    3.打开Windows的命令行窗口

    快捷方式:win+R然后输入cmd确认。

    将路径切换到自己希望保存项目的路径。

    然后输入:vue init

    init是初始化项目,template-name是模版名,project-name是项目名(自定义)。

    例如(vue init webpack thefive)

    目前vue官方提供了六种初始化模版,分别是webpack、webpack-simple、browserify、browserify-simple、pwa、simple。其中最常用的是webpack模版。

    这时候命令行会出现一系列提问需要你去确认。

    ? Project name (thefive)

    确认项目名

    ? Project description (A Vue.js project)

    确认项目描述

    ? Author (.................)

    确认作者信息

    ? Vue build (Use arrow keys)

    Runtime + Compiler: recommended for most users
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

    选择打包方式

    ? Install vue-router? (Y/n)

    是否安装vue-router

    ? Use ESLint to lint your code? No

    是否使用ESLint语法

    ? Set up unit tests (Y/n)

    是否添加单元测试

    ? Setup e2e tests with Nightwatch? (Y/n)

    ? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

    Yes, use NPM
    Yes, use Yarn
    No, I will handle that myself

    选择启动方式

    1. 初始化之后,再次将路径改到你的thefive里面

    cd thefive

    然后

    npm run dev

    运行之后会得到一个本地地址:

    http://localhost:8082

    将地址复制到浏览器就可以看到效果了。

  • 相关阅读:
    vue day6 分页显示
    vue day5 分页控件
    vue day4 table
    c# excel xlsx 保存
    diff算法
    Web Workers
    多线程
    Http请求优化
    高效编写代码
    渲染引擎
  • 原文地址:https://www.cnblogs.com/akun-2017/p/9574418.html
Copyright © 2011-2022 走看看