安装node js到构建一个vue并启动它

迷南。 2022-05-19 02:37 162阅读 0赞

1、安装**node js**

下载地址：[http://nodejs.cn/download/][http_nodejs.cn_download]

**这里选择msi，安装过程就一路next**  
2、安装完成后运行**Node.js command prompt**（**node -v**查看安装版本）

![format_png][]  
3、安装npm（由于现在版本的nodejs已经集成npm所以无需安装，可以用**npm -v **查看版本）

![format_png 1][]  
4、注册cnpm来代替npm和淘宝镜像  
　　使用命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

不使用淘宝镜像恢复原来的镜像

> npm config set registry [https://registry.npmjs.org][https_registry.npmjs.org]

如果你发现你安装成功了，使用cnpm却发现找不到命令，那么就是你的环境变量有问题，在环境变量里面的path添加你node的安装路径就行，比如";C:\\Program Files\\nodejs\\node\_modules"

5、安装vue脚手架vue-cli  
　　命令：**cnpm install -g vue-cli**

**　　**安装成功后可以用 **vue -V **查看vue版本（**这个V是大写的V**）

使用这个命令安装的vue版本是2.9.6对于一些新的语法可能不支持，可以通过这个命令来安装新版本的vue-cli

npm uninstall -g vue-cli
    
    npm install -g @vue/cli

6、cd到对应的目录下初始化vue项目  
　　命令：**vue init webpack my-project**  
　　　　　　Project name 项目名   
　　　　　　Project description 项目名描述   
　　　　　　Author 作者邮箱   
　　　　　　Use ESLint to lint your code? 是否需要ESlist语法检查   
　　　　　　Setup unit tests with Karma + Mocha? 是否需要单元测试   
　　　　　　Setup e2e tests with Nightwatch? Yes是否需要e2e测试   
7、**package.json**为项目依赖资源，如果要运行这个项目需要使用**cnpm install** 安装依赖项（直接在项目文件夹路径下执行）  
8、使用命令**cnpm run dev**启动项目，浏览器会打开 [http://localhost:8080/\#/][http_localhost_8080] 看到以下效果

![format_png 2][]

开发时属于热部署状态，代码保存后浏览器会自动刷新，错误提示也非常友好。

9、编译打包** cnpm run build**

会编译打包到项目dist文件夹下，然后我们就可以部署到服务器上（注意：如果你直接打开index.html，可能页面会是一片空白，这是由于你引用的js路径有问题）

![format_png 3][]

10、使用jQuery包

http://www.cnblogs.com/pandabunny/p/5417938.html

[http_nodejs.cn_download]: http://nodejs.cn/download/
[format_png]: /images/20220519/4929d7044b484b61846a97d9c112eff5.png
[format_png 1]: /images/20220519/08336a031f9c439ba299c393828b3c80.png
[https_registry.npmjs.org]: https://links.jianshu.com/go?to=https%3A%2F%2Fregistry.npmjs.org
[http_localhost_8080]: http://localhost:8080/#/
[format_png 2]: /images/20220519/39eb54bc16c2411aa5eff430f59e8704.png
[format_png 3]: /images/20220519/911b961f0f9344dca190b129b0e99412.png