使用Vue搭建环境及创建项目

    技术2022-07-15  56

    使用Vue搭建环境及创建项目

    1 开发环境

    1.1 WebStorm

    Webstorm是专用于web开发的号称最好的的编辑器,界面美观大方,有黑、白和经典三大主题可选,使用起来整体 感觉良好 下载地址:http://www.jetbrains.com/webstorm/ 下载完后在网上搜安装教程教程,这里就不做描述了

    1.2 Node JS

    Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/ 选择系统对应的版本,这里下载的是 Windows系统64位的zip文件,解压,可以看到里面有个node.exe可执行文件,如图所示

    然后把Node添加到系统的环境变量中,如图所示: 安装npm命令:

    // linux 系统命令 sudo npm install npm -g // windows 系统命令 npm install npm -g

    打开cmd命令行,输入npm -v出现下图所示信息则安装成功!!!!

    1.3 安装 webpack

    用npm命令安装打包工具webpack npm install webpack -g

    安装好以后输入命令webpack -v,出现下面信息则安装成功。

    1.4 安装 vue-cli

    安装vue脚手架项目初始化工具vue-cli:

    npm install webpack -g

    1.5 安装淘宝镜像

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

    1.6 安装 Yarn

    Yarn是Facebook发布的node.js包管理器,对比npm来说它更快、更可靠、更安全的依赖管理工具,安装代码: npm i yarn -g -verbose

    因为npm官方资源访问速度实在是太慢了,所以切换为淘宝镜像,安装完之后执行下面的命令:

    yarn config set redistry https://registry.npm.taobao.org

    2 创建项目

    2.1 生成项目

    当我们把环境搭建好了以后,就可以通过vue-cli来生成项目了哟, system-ui项目名。 nmp init webpack system-ui

    更具一路的提示输入项目信息,等项目的生成

    当你选择Yarm时:

    2.2 启动项目

    先要进入项目:

    cd system-ui

    执行应用启动命令,运行项目:

    npm run dev

    执行完命令后,出现: I Your application is running here: http://localhost:端口号 ,说明启动成功了。 在浏览器上浏览:http://localhost:8080,就会出现vue的界面。

    以上就是生成Vue项目的过程了,如有不对的地方请多多包涵!!!!!!!!!!!!
    Processed: 0.014, SQL: 9