Vue-cli脚手架搭建Vue项目(步骤流程)

Vue-cli脚手架搭建Vue项目(步骤流程),第1张

好久没写笔记了,可能是人懒了吧,今天写一个脚手架搭建vue项目的流程。(不过网上一搜一大堆,写下来主要是最近比较闲,复习一下吧)
一、确保电脑有node.js

1.官网下载地址、如果不太熟点我可以看菜鸟的步骤流程。
2.CMD打开命令窗口,输入:node -v。全拼:node --version。如果出现版本号就是安装完成。
3.后续会有一些npm的 *** 作,但npm下载可能出现缓慢的情况,所以我们用cnpm吧。(PS:npm的服务器是在国外的,可能会出现下载缓慢的情况,这时候就得感谢我们的马先生建立的阿里巴巴了,阿里巴巴的淘宝团队把npm官网的插件全部同步到了中国的服务器并提供给广大国内码农使用,太赞了。)
命令窗口输入:npm install cnpm -g --registry=https://registry.npm.taobao.org
4.下载好了输入:cnpm -v 查验版本号。后续使用cnpm 代替npm(视情况选择)

二、搭建vue项目

  1. 把终端设定到想建项目的路径输入:npm install -g vue-cli 或 cnpm install -g vue-cli
  2. 在终端输入:vue init webpack “XXXX” 注意XXXX是你项目的名称,不需要加引号,如: vue init webpack vue2-test
? Project name vue2-test //设置项目名称
? Project description 用於練習的項目 //设置项目描述
? Author XXXxx //设置项目作者,如果vscode登录了,会默认以登陆者为作者,未登录就指向window用户名
// 以上三个可以后配置文件中修改,所以影响不是很大
? Vue build standalone // 打包的方式,直接回车即可
? Install vue-router? Yes // 是否安装路由router 输入y y=yes,也可以自己安装
? Use ESLint to lint your code? No 
// ↑是否需要语法检测,比如一个分号未加就报错那种,有些公司项目比较严谨,根据需求来 我大多是No
? Set up unit tests No //是否安装单元测试工具,我自己是用不上的(可能太菜了吧) 所以No
? Setup e2e tests with Nightwatch? No // 需不需要 端到端测试工具 我也用不上,所以No了
? Should we run `npm install` for you after the project has been created? (recommended) npm
// ↑ 这个可以选npm 也就是使用npm运行以上配置建立vue项目
// ↑ 可以直接回车,也可以选第三个 然后自己去cnpm inistall

直接回车或者自行cnpm的 等待搭建完成即可,会在你指定的路径出现以下文件

在config文件夹里的index.js 将aotuOpenBrowser的键设为true,可以自动运行默认浏览器

最后找到这个“vue2-test”,vscode右键集成终端打开 npm run dev 即可运行。

到此我们的vue2项目已经搭建好,不过现在好多都是用vue3了,无非是命令大同小异,原理都是一样

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/800471.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-07
下一篇 2022-05-07

发表评论

登录后才能评论

评论列表(0条)

保存