Liudongge / JavaScript_Notes

learn and work by JS
0 stars 0 forks source link

使用node和npm进行vue.js的项目搭建与运行 #6

Open Liudongge opened 7 years ago

Liudongge commented 7 years ago

http://blog.csdn.net/u013182762/article/details/53021374

Liudongge commented 7 years ago

安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

安装vue-cli脚手架构建工具 在命令行中运行命令 npm install -g vue-cli

用vue-cli构建项目 vue init webpack projectName 这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。 projectName项目名称自定义 (if error happened, it means vue-cli install failed.)

安装项目所需的依赖 要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install 安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

运行项目 在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。

Liudongge commented 7 years ago

vue文件中使用scss时,出现无法加载vue-style-loader和css-loader的情况,重新执行了npm install又可以使用了。 如果还不好使,尝试修改package.json,然后再重新npm install. 原因分析:待完成

Liudongge commented 7 years ago

镜像大法: https://npm.taobao.org/mirrors/

Liudongge commented 7 years ago

cnpm的坑 https://www.linzhihao.cn/archives/3828/ 结论:尽量使用npm来安装,或者使用淘宝源

// npm设置淘宝源  
npm config set registry http://registry.npm.taobao.org

避免直接使用cnpm安装

Liudongge commented 7 years ago

webpack热加载 http://acgtofe.com/posts/2016/02/full-live-reload-for-express-with-webpack http://www.jianshu.com/p/469ad98ad1da

Liudongge commented 7 years ago

vue是使用roolup打包配置的,学习一下----待完成

Liudongge commented 6 years ago

分清node环境和浏览器环境的区别,javascript执行环境和V8引擎