美文网首页
第一个vue项目构建

第一个vue项目构建

作者: my沙漠玫瑰 | 来源:发表于2018-07-26 15:56 被阅读0次

    1、安装node环境,去node官网上下载,如果需使用git,window系统建议下载一个git.exe,使用gitbash;

    2、安装npm,建议安装cnpm淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org

    cnpm -v查看版本

    3、安装vue脚手架 cnpm install -g vue-cli

    4、配置vue环境变量(目的是为了在计算机的其他目录下也可以使用vue命令,初始化vue项目)

    vue -V可以查看是否安装及配置成功

    步骤:

    计算机右键——属性——高级设置——最下面环境变量——在path路径后面拼接vue.cmd的路径

    注:在安装脚手架的过程中会提示vue.cmd的安装目录,也可以脚手架安装成功后全局搜索vue.cmd,复制路径拼接到path项后面即可,记得以分号间隔

    5、 vue init webpack myweb (初始化一个vue项目,myweb是我起的项目名,项目名不能使用大写英文字母)

    Project name:——项目名称

    Project description:——项目描述

    Author:——作者

    Vue build:——构建模式,一般默认选择第一种

    Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到

    Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

    Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装

    6、安装依赖cnpm,下载到该vue项目中,用cnpm  run dev来启动项目

    7、默认是8080端口,如果端口被占用会报错,可以在config文件夹下的index.js中更改端口,我用的是8000端口

    8、启动项目初始页面cnpm run dev,可能会出现不自动打开浏览器运行项目,如下

    此处告知了项目的运行地址,在地址栏输入地址即可查看项目,将autoOpenBrowser: false,改为true即可自动打开浏览器运行项目,如图

    注:建议关闭命令窗口重新运行,因为配置文件更改了,否则可能不起作用

    9、最终效果

    相关文章

      网友评论

          本文标题:第一个vue项目构建

          本文链接:https://www.haomeiwen.com/subject/tlkbmftx.html