基础-npm创建vue项目

 

安装nodejs 官网安装

安装完进cmd

输入 node -v  出现版本号则安装成功

 

node 全局安装 -g 的库都在 C:\Users\用户\AppData\Roaming\npm\node_modules

直接局部安装的都在项目目录下 \node_modules 里面

 

---

1.安装vue

  npm install vue  安装vue

测试是否安装成功：vue -V  出现版本号则成功

 

2.全局安装vue 脚手架

npm install --global vue-cli

查看有什么可以创建的项目可以输入 vue list

 

3.创建一个vue项目

vue init webpack new-project  蓝字是自己的vue目录名 自己随意取

---

 

Vue 提供了一个官方的 CLI（命令行工具），为单页面应用快速搭建 (SPA) 繁杂的脚手架。

 

安装cnpm：

因为国内npm很慢不稳定，所以用淘宝的NPM镜像（这样 npm 可以被替换为 cnpm）

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

 

安装vue-cli：

#全局安装 vue-cli
$ cnpm install -g vue-cli
#创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
$ cd my-project
#安装依赖
$ cnpm install
#运行
$ npm run dev
 

 

 

详细说明：

1. 创建新项目

$ vue init webpack my-project
执行后：

●  ? Project name (my-project)

        文件名（回车默认）

●  ? Project description (A Vue.js project)

        项目描述

●  ? Author

        作者

●  ? Vue build (Use arrow keys)

> Runtime + Compiler: recommended for most users 

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

        选择默认

●  ? Install vue-router? (Y/n)

        安装 vue-router？（Vue路由功能）

●  ? Use ESLint to lint your code? (Y/n)

        安装 ESLint ？（语言的检查工具）

●  ? Set up unit tests (Y/n)

        安装单元测试？

●  ? Setup e2e tests with Nightwatch? (Y/n)

        安装 e2e 测试？

●  ? Should we run `npm install` for you after the project has been created? (recommended)
  Yes, use NPM
  Yes, use Yarn

> No, I will handle that myself

        （项目创建完成后，我们是否应该为您运行'npm install'）选择不运行，因为已使用 cnpm，之后手动安装。

2. 进入项目：

 

cd my-project
3. 安装依赖：

 cnpm install

如果不可以的话就输入 ：npm install 

 

安装成功

4. 运行：

 

cnpm run dev
弹出：

 

浏览器输入：http://localhost:8080/

 

出现此页面即环境搭建成功！

如果想修改端口，找到项目中 config 文件夹下的 index.js 文件，修改端口号：

 

 

 

 

---

4.启动项目

进入项目目录 打开cmd

npm run dev

 

5.打包项目

npm run build