安装node.js与webpack创建vue2项目

简介: 安装node.js与webpack创建vue2项目

转载请注明出处:

1.安装node.js

  下载地址:http://nodejs.cn/download/ (可查看历史版本)

    node.js 中文网:http://nodejs.cn/api-v16/

    建议下载稳定版本的msi 格式的进行安装;msi 为windows 直接安装包,一直next即可;

    安装之后查看 node 和 npm 版本

                    

    并设置 全局配置

npm config set prefix "C:\nodeconfig\node_global"
npm config set cache "C:\nodeconfig\node_cache"
npm config set registry https://registry.cnpmjs.org/

2.全局安装脚手架 vue-cli

# 安装vue-cli2
npm install vue-cli -g

  检查是否安装成功

                                       

  如果提示 vue 不是内部或外部命令,也不是可运行的程序时:

                                     

  通过 npm config list 查看 node 的全局配置,并到 prefix 对应的目录下查看是否有vue.cmd 的脚本文件

                                

   将 prefix 的目录添加到环境变量当中; 并重新打开 命令窗口,再查看 vue是否安装成功(需要重新打开 命令窗口才能看到刷新生效) 

3.使用webpack创建项目

  全局安装webpack

npm install webpack -g

  通过 webpack 创建项目

vue init webpack project_name

  创建项目过程中有一串的选择项:

? Project name my_test
? Project description A Vue.js project
? Author user 
? Vue build standalone                    (构建模式,默认选择第一种 运行时+编译时)
? Install vue-router? Yes                (是否安装引入路由,选择yes)
? Use ESLint to lint your code? No        (是否使用ESLint语法,严格模式,选择no)
? Set up unit tests No                    (是否设置单元测试,选择 NO)
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm     (是否使用npm初始化,选默认使用npm)
   vue-cli · Generated "my_test".

  出现如下界面即表示创建成功

                                   

4.导入vscode,并进行启动访问

  生成的目录结构如下:

                            

  使用 npm run dev 进行启动,并访问

  

 

标签: Vue学习使用

目录
相关文章
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
24天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
21天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
28天前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
29天前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
2月前
|
JavaScript
NodeJs的安装
文章介绍了Node.js的安装步骤和如何创建第一个Node.js应用。包括从官网下载安装包、安装过程、验证安装是否成功,以及使用Node.js监听端口构建简单服务器的示例代码。
NodeJs的安装
|
1月前
|
JavaScript 开发工具 git
已安装nodejs但是安装hexo报错
已安装nodejs但是安装hexo报错
30 2
|
1月前
|
JavaScript Linux 网络安全
VS Code远程调试Nodejs项目
VS Code远程调试Nodejs项目
|
2月前
|
存储 JavaScript 前端开发
Node 版本控制工具 NVM 的安装和使用(Windows)
本文介绍了NVM(Node Version Manager)的Windows版本——NVM for Windows的安装和使用方法,包括如何安装Node.js的特定版本、列出已安装版本、切换使用不同版本的Node.js,以及其他常用命令,以实现在Windows系统上对Node.js版本的便捷管理。
Node 版本控制工具 NVM 的安装和使用(Windows)
|
1月前
|
Web App开发 JavaScript 前端开发
JavaWeb 22.Node.js_简介和安装
JavaWeb 22.Node.js_简介和安装