关于vue构建项目的一些指令

Posted 2020-10-09 鱼樱、、

第一步：

brew install nodejs（MAC机子下）  Windows直接官网下载对应版本node.js

第二步：

获取nodejs模块安装目录访问权限（Windows系统忽略）
sudo chmod -R 777 /usr/local/lib/node_modules/

第三步：

npm install -g cnpm --registry= https://registry.npm.taobao.org（安装淘宝镜像/或者使用自己公司代理）

第四步：

安装webpack
cnpm install webpack -g（全局安装打包机）

第五步：

安装vue脚手架
npm install vue-cli -g

第六步：

在硬盘上找一个文件夹放工程用的，在终端中进入该目录
Mac
cd 目录路径
根据模板创建项目
vue init webpack-simple 项目名字            <注意不能用中文！！！>
或者创建 vue1.0 的项目（可忽略因为现在基本是2.0猜想后面是随着迭代升级）
vue init webpack-simple#1.0 项目名字     <注意不能用中文！！！>

第八步：

安装项目依赖
一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。
npm install
(不要从国内镜像cnpm安装，会导致后面缺了很多依赖库，其实这个还是按照实际项目来一般也是可以的。)
cnpm install
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
cnpm install vue-router  vue-resource --save（安装模块一般是中间空格隔开，）
启动项目
npm run dev/cnpm run dev

注意安装模块依赖：

cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)

注意：npm update vue-cli更新脚手架的版本命令和 npm update -g 更新npm版本（主要是防止低版本有时候构建项目会报错的解决方法一般也有提示）

构建好的项目骨架一般最重要的就是开发部分src下的目录，组件基本放这里面或者自己取文件夹名字也是可以的。

记住：

App.vue // 页面入口文件
main.js // 程序入口文件，加载各种公共组件
index.html // 入口页面

router下面的index.js是配置路由信息的。（单页面的title也可以这里配置）

关于webpack的就自行官网API。。。谢谢！