• vue-cli创建vue项目基本步骤


    vue是当前比较流行的前端框架之一,被很多大公司所使用,学会使用它将会使我们的前端开发变得更加高效。这里简单介绍一下通过vue-cli(俗称“脚手架”)创建vue项目的步骤。

    一、环境搭建

    1. 在电脑上安装nodejs.
    2. 检查node和npm的版本,更新npm版本
    node -v //查看node版本 
    npm -v  //查看npm版本
    //如果不是最新版本,可以运行如下指令
    npm install -g npm
    
    1. 使用淘宝npm镜像,cnpm
    //当npm速度很慢时,可以考虑使用cnpm命令安装模块
    //安装cnpm的指令
    npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org
    
    1. 安装vue-cli,有了这个才能创建vue基本项目
    cnpm install vue-cli -g //全局安装vue-cli
    vue list    //检查vue-cli是否安装成功
    

    二、创建项目

    按照步骤一搭建完环境之后就可以开始创建项目了

    1. 打开命令行,进入要创建项目的文件夹
    2. 命令行输入如下命令
    //在当前文件夹下生成该项目名称的vue项目文件夹
    vue init webpack "项目名称"
    
    1. 进行一些选择
      输入命令后会出现一系列的选项,是关于vue项目的一些配置,推荐使用如下选择
    'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    �������ļ�
    ? Project name myvue
    ? Project description my first vue project
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? No  //以下三处选择No会避免一些警告
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli · Generated "myvue".
    

    这样一个vue基础项目就创建完毕啦。

    三、开发和运行

    项目创建完毕后就可以用开发工具打开进行开发了,那么如何在开发状态下查看运行效果呢?
    方法如下,以下命令需要进入项目文件夹后操作

    1. 首先安装依赖,一些和运行项目相关的依赖通过这个命令安装
    npm install //安装依赖有时候不成功可以换成cnpm或者再试一遍
    
    1. 启动项目
    npm run dev //这样就可以启动了
    

    四、目录结构

    build   //构建相关
    config  //配置相关,启动端口号等配置
    node_modules    //下载的模块
    src     //编写的源码
        assets  //存放一些资源
        components  //存放组件(vue文件),主要开发的地方
    static  //静态资源目录,CSS,js,图片
    

    五、打包

    //打包生成dist文件夹,将这个文件夹直接部署到服务器上即可
    npm run build
    

    当然,如果直接这样打包部署后应该是访问不了的。这里有一个坑,就是要修改项目config文件夹下index.js中的build的配置。将build中的assetsPublicPath的值原本是"/",修改成"./",如下。修改之后打包就没问题了。

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        ......
    
  • 相关阅读:
    computed 和 watch 的区别和运用的场景?
    yarn window安装包地址
    说说你对SPA(单页应用)的理解?
    Java基础:并发小结
    疫情数据
    浅谈外挂常识和如何防御
    深度确定性策略梯度(DDPG)
    毕业设计项目介绍:面向海量小文件数据存储平台
    uniappvue和微信小程序的区别、比较 (基础)
    uniapp白话及入门
  • 原文地址:https://www.cnblogs.com/conti/p/14054655.html
Copyright © 2020-2023  润新知