【vue】创建一个vue前端项目,编译,发布
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
【一】mac检查是否安装node.js
nvm --version =>0.33.9 node -v =>v10.7.0
【二】安装web-pack -g
cnpm install webpack -g
【三】安装vue-cli
cnpm install --global vue-cli
【四】创建一个vue项目。
$ vue init webpack my-self-project ? Target directory exists. Continue? Yes ? Project name my-self-project ? Project description A Vue.js project ? Author shangxiaofei <shangxiaofei@meituan.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-self-project".
【五】构建项目,进入项目的根目录,执行如下命令
$ cnpm install ✔ Installed 58 packages ✔ Linked 87 latest versions Downloading https://cdn.npm.taobao.org/dist/chromedriver/2.41/chromedriver_mac64.zip Saving to /var/folders/38/_q18xrkj2j7bhklb_kpgfdx00000gn/T/chromedriver/chromedriver_mac64.zip Received 782K... Received 1564K... Received 2346K... Received 3128K... Received 3910K... Received 4691K... Received 5473K... Received 5625K total. Extracting zip contents Copying to target path /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.0@chromedriver/lib/chromedriver Fixing file permissions Done. ChromeDriver binary available at /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.0@chromedriver/lib/chromedriver/chromedriver ✔ Run 1 scripts Recently updated (since 2018-07-30): 3 packages (detail see file /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/.recently_updates.txt) ✔ All packages installed (91 packages installed from npm registry, used 8s(network 3s), speed 202.91kB/s, json 89(547.32kB), tarball 16.78kB)
【六】发布项目
cnpm run dev > my-self-project@1.0.0 dev /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 3121ms 15:10:52 I Your application is running here: http://localhost:8080