如何创建一个vue项目

详细版：

一、nodejs的安装

 

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。

我们可以根据不同平台系统选择你需要的Node.js安装包。Node.js 历史版本下载地址：https://nodejs.org/dist/

这里演示的是Window64位安装Node.js，下面演示的是采用安装包的方式来安装。

1、Windows 安装包(.msi)

 Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）：

   

:点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

 安装完之后启动cmd依次执行以下两条命令检测是否安装成功，结果如下：

 二、node.js的环境变量的新建。  //我安装的路径是 D:\soft\nodejs

    其实安装完node，就自动在path里增加环境变量，但是为了以后的本地部署项目，我们需要找到node.js的安装根目录，在当中新建“node_global”和"node_cache"两个文件夹。

1、 启动cmd依次执行以下两条命令

　　npm config set prefix " D:\soft\nodejs\node_global"
　　npm config set cache " D:\soft\nodejs\node_cache"

2、 设置环境变量

　　说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

　　1．鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

　　2．点击环境变量弹出下列对话框：

　　3．新增系统变量NODE_PATH：把变量值设置成“D:\soft\nodejs\node_global\node_modules” （这样就可以把后面全局安装的装到global里并且可以直接用命令使用。）

4． 修改用户变量PATH：选中PATH，点击编辑，把“D:\soft\nodejs\node_global;”加到前面

三、安装淘宝的npm镜像

　　输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

　　这个其实看个人爱好吧，因为npm在国内下载速度是很慢，所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。

四、安装全局vue-cli脚手架、webpack

命令输入

　　cnpm install vue –g  //全局安装vue

 　cnpm install -g vue-cli                        //全局安装vue-cli

　　cnpm install -g webpack                          //全局安装webpack

       cnpm install -g webpack-dev-server             //安装webpack的本地webserver

　　安装完成后，vue-cli脚手架其实就已经把vue也装掉了，所以只需输入vue  -V 和 webpack  -v  等等就可以查看安装成功与否。

 下面是以上命令的结果:

$ npm install vue -g

E:\nodejs\node_global
`-- vue@2.4.4


$ npm install -g vue-cli

E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue
E:\nodejs\node_global
`-- vue-cli@2.9.1
  +-- async@2.5.0
  | `-- lodash@4.17.4
  +-- chalk@2.1.0
　.....  此处省略很多结果数据 .....


$ npm install webpack -g

E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
E:\nodejs\node_global
`-- webpack@3.7.1
  +-- acorn@5.1.2
  +-- acorn-dynamic-import@2.0.2
 .....此处省略多行数据.......
  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


$ npm install -g webpack-dev-server

E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
E:\nodejs\node_global
+-- UNMET PEER DEPENDENCY webpack@^2.2.0 || ^3.0.0
`-- webpack-dev-server@2.9.1
  +-- ansi-html@0.0.7
  +-- array-includes@3.0.3
.....此处省略多行数据......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpack-dev-server@2.9.1 requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed.
npm WARN webpack-dev-middleware@1.12.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.

第二步

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。

只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目 此处我填的是my-project

$ vue init webpack my-project

$ vue init webpack test     //输入命令

? Project name (test) test
? Project name test
? Project description (A Vue.js project) 测试项目
? Project description 测试项目
? Author lxx1024
? Author lxx1024
? Vue build standalone
? Install vue-router? (Y/n) Y     //安装路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n       //Eslint验证,很严谨,所以选择n
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) Y
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) Y
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "test".

   To get started:

     cd test
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

# 安装依赖，走你

$  cd my-project    //进入到项目的根目录--直接进入到该文件夹即可

$ npm install        //安装依赖包

$ npm run dev     //运行项目

 

下面是运行结果

> npm install

> phantomjs-prebuilt@2.1.15 install C:\Users\81487\Desktop\test\node_modules\phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\81487\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 54.231.81.168:443
    at Object.exports._errnoException (util.js:1020:11)
    at exports._exceptionWithHostPort (util.js:1043:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

Please report this full log at https://github.com/Medium/phantomjs
test@1.0.0 C:\Users\81487\Desktop\test
+-- autoprefixer@7.1.5
| +-- browserslist@2.5.1
| | `-- electron-to-chromium@1.3.26
| +-- caniuse-lite@1.0.30000746
| +-- normalize-range@0.1.2
.................
.................
| +-- html-entities@1.2.1
| +-- querystring@0.2.0
| `-- strip-ansi@3.0.1
|   `-- ansi-regex@2.1.1
`-- webpack-merge@4.1.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN karma-sinon-chai@1.3.2 requires a peer of sinon@^2.1.0 but none was installed.
npm ERR! Windows_NT 10.0.10240
npm ERR! argv "E:\\nodejs\\node.exe" "E:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.11.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! phantomjs-prebuilt@2.1.15 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1.15 install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the phantomjs-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs phantomjs-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls phantomjs-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\81487\Desktop\test\npm-debug.log


> npm run dev

> node build/dev-server.js

> Starting dev server...
 DONE  Compiled successfully in 15700ms23:48:41

> Listening at http://localhost:8080

打开网址显示vuejs就是成功创建了


精简版：

1：打开cmd命令行，首先安装node

步骤：https://nodejs.org/en/download/      node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。

2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息

3：输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖

4：安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可。

5：选定路径，新建vue项目，这里我是新建到桌面上

6：在上一步得目录下新建项目，指令vue init  webpack +项目名称

7：上一步之后就会开始新建项目，询问项目的相关配置。一路yes省事儿没啥问题

8：进入到项目的文件夹下

9：运行项目，指令npm run dev

10:在浏览器中打开这个网址，就能看到

至此，vue项目新建完毕

转载于:https://www.cnblogs.com/CaseyWei/p/9329421.html