今天想了解一些vue开发相关的东西，所以自己动手搭建了一些开发环境。下面是我安装配置的相关过程。（Mac系统）下载安装nodejs6.11.4（含npm3.10.10）安装完成后升级命令行npm$npminstallnpm@latest-g$npm-v5.5.1权限设置$npmconfiggetprefix/usr/local$sudochown-R$(whoami)$(npmconfiggetprefix)/{lib/node_modules,bin,share}npmconfiggetprefix用于查找npm目录sudochown-R$(whoami)$(npmconfiggetprefix)/{lib/node_modules,bin,share}赋予当前用户读写npm相关目录的权限。安装webpack和vue-cli$npminstallwebpack-g$npminstallvue-cli-g$npmlist-g--depth=0/usr/local/lib├──create-react-native-app@1.0.0├──es-checker@1.4.1├──npm@5.5.1├──vue-cli@2.9.1└──webpack@3.8.1createproject$cdyour_workspace_folder$vueinitwebpackprojectname比如我的项目叫做vueStart，不用输入，回车即可。$vueinitwebpack-simplevueStart?项目名称vuestart?项目描述Vue.js项目？作者tomfriwel？使用萨斯？没有vue-cli生成“vueStart”。开始：cdvueStartnpminstallnpmrundev。这里要注意，如果你使用vueinitwebpack-simpleprojectname，那么npmrundev就不行了。所以这里使用webpack代替webpack-simple。这里vueinitwebpack和npminstallwebpack不同。vueinitwebpack是安装webpack模板（或者下面列出的一些模板webpack-simple/browserify...）具体信息可以查看vuejs-templates/webpack获取一些可用的模板webpack-Afull-featuredWebpack+vue-loadersetup具有热重载、linting、测试和CSS提取。webpack-simple-一个简单的Webpack+vue-loader设置，用于快速制作原型。browserify-功能齐全的Browserify+vueify设置，具有热重载、linting和单元测试。browserify-simple-用于快速原型制作的简单Browserify+vueify设置。pwa-基于webpack模板的vue-cliPWA模板简单-最简单possibleVuesetupinasingleHTMLfileconfigurationproject进入创建的项目目录$cdvueStart/$npminstallnpminstall之后会安装一些乱七八糟的东西。安装vue路由模块vue-router和网络请求模块vue-resource。如果您不需要这两个，则无需安装它们。$npminstallvue-routervue-resource--save+vue-resource@1.3.4+vue-router@3.0.1added17packagesin6.541s--saveforrunningandbuilding$npmrundev如果没有问题，打开页面是这样的。改.vue后，页面会自动更新，非常方便。开始写src文件夹目录src├──App.vue├──assets│└──logo.png├──components│└──HelloWorld.vue└──main.js这里App.vue引用了一个名字叫HelloWorld组件。我们对HelloWorld组件进行更改。保存后发布执行$npmrunbuild完成后会生成一个dist文件夹dist├──index.html└──static├──css│└──app.86d25fd679f2d9f5bee9162ae7804b46.css└──js├──app.bcbf2665a80fe0bdc316.js├──app.bcbf2665a80fe0bdc316.js.map├──manifest.f9cc8df0a9bc12617260.js├──manifest.f9cc8df0a9bc12617260.js.map├──vendor.5edf78e409459ac3ccd1.js└──vendor.5edf78e409459ac3ccd1.js.map如果你想在本地运行而不是放在服务器上，你需要修改config/index.js一个小改动。将build中的assetsPublicPath改成./，否则会找不到资源。最后再次运行npmrunbuild，就可以直接用浏览器打开dist文件夹下的index.html了。...module.exports={build:{env:require('./prod.env'),index:path.resolve(__dirname,'../dist/index.html'),assetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'static',assetsPublicPath:'./',productionSourceMap:true,...Tipsnpmrunbuild和npmrundev其实就是运行包中脚本对应的脚本。JSON。例如我的..."scripts":{"dev":"nodebuild/dev-server.js","start":"npmrundev","build":"nodebuild/build.js"},...你可以自己测试一个..."scripts":{"dev":"nodebuild/dev-server.js","start":"npmrundev","build":"nodebuild/build.js","test":"echo123"},...然后运行??npmruntest查看结果。相关参考安装Node.js和更新npm修复npm权限Vue2.0新手完整填坑攻略-从环境搭建到发布npminstall的--save选项是什么？Vue登山之路（一）——使用vue-cli搭建项目基于vue-cli快速搭建npm脚本使用指南vuejs/vue-cli
