• VUE 脚手架项目搭建


    1. 概述

    1.1 说明

      vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。GitHub地址是:https://github.com/vuejs/vue-cli

     2. 搭建

    2.1 node环境

      首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

      安装完成后,可以命令行工具中输入 node -vnpm -v,如果能显示出版本号,就说明安装成功

       

    2.2 安装vue-cli

      安装好了 node,就可以直接全局安装 vue-cli:npm install -g vue-cli

      安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功

      

    2.3  生成项目

      首先需要在命令行中进入到项目目录,然后输入:vue init webpack Vue-Project

      其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates ;Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

      

      配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目,基础项目搭建完成。

    2.4  安装依赖

      npm install  (也可yarn install,使用yarn需安装进行安装对应yarn环境),安装后会写入package.json文件中,而不同的安装命令写入的位置也不同。

    • npm install :对象 devDependencies(开发环境) 和 对象 dependencies(生产环境) 都写入所安装的依赖包与对应包的版本号。
    • npm install --save:对象 dependencies 写入所安装的依赖包与对应包的版本号。  
    • npm install --save-dev:对象 devDependencies 写入所安装的依赖包与对应包的版本号。

     2.5 启动项目

      npm run dev 项目启动后 http://localhost:8080 即可打开本地项目地址,localhost为默认主机名,8080端口为默认端口,config>index.js文件中port为端口号设置,可进行更改设置(如8010)。host为主机名设置,设置为‘0.0.0.0’可IP访问也可localhost访问。

      

     2.6 打包上线

      npm run build 项目打包时需注意是否有静态文件的引用,即static文件夹下的一些文件,若有引用则需对config>index.js文件中的build对象下的assetsPublicPath值进行更改。

      

      注意:assetsSubDirectory所指向的文件夹不会被webpack处理,使用方式为直接拷贝到最终的路径,由于必须使用绝对路径来引用此文件夹下的内容,所以assetsPublicPath 中的路径需更改为./。

  • 相关阅读:
    汉诺塔实现笔记
    python-nmap的函数学习
    字符串匹配的KMP算法(转)
    QT下的贪吃蛇
    PentestBox在win10里打不开工具
    Dalvik虚拟机执行流程图
    用dx生成dex时遇到class name does not match path
    python3 小工具
    python3的Cryptodome
    前端学习笔记 day02 CSS
  • 原文地址:https://www.cnblogs.com/ajuan/p/10174287.html
Copyright © 2020-2023  润新知