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

安装,node,js,webpack,创建,vue2,项目 · 浏览次数 : 93

小编点评

**安装 Node.js** 1. 下载 Node.js 的最新版本： - 官方网站：http://nodejs.cn/download/ - 历史版本查看：http://nodejs.cn/api-v16/ **全局安装脚手架 Vue-Cli** 1. 使用 npm 命令行： - `npm install webpack -g` **使用 Webpack 创建项目** 1. 在终端中运行以下命令： - `vue init webpack project_name` **创建项目** 1. 在项目目录中，运行以下命令： - `npm run dev` **导入 VS Code** 1. 安装 VS Code。 2. 启动 VS Code。 3. 在 VS Code 中打开项目目录。 4. 启动 VS Code 的终端。 5. 使用以下命令运行开发服务器： - `npm run dev` **总结** - 安装 Node.js - 下载 Node.js - 安装 Webpack - 使用 Webpack 创建项目 - 创建项目 - 导入 VS Code - 启动 VS Code 的开发服务器

正文

转载请注明出处：

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 进行启动，并访问