cnpm 下载vue-cli_在hbuilderx上无脑搭建vue脚手架(vuecli)2.x项目并解决Bug

由于小编用hbuilderx有些多，请见谅，但小编

已经熟悉如何在hbuilderx上搭建项目。

您只要跟着我搭建好以后，把项目文件夹在其他软件里打开就行。

先安装基本的环境

在https://nodejs.org/en/这个网站上下载nodejs，一路next。安装完成后，打开命令行cmd，输入：

node -v

，回车之后若出现版本号，则没问题

，如果你说你像小编一样怂害怕装错，那就看看https://www.jianshu.com/p/13f45e24b1de这个，小编当时就是看的这个

，然后输入：

npm install -g cnpm registry=https://registry.npm.taobao.org

，回车之后出现一堆东西，出现@+版本号等字样，则没问题，然后输入：

cnpm -v

，回车之后出现一堆东西，出现@+版本号等字样，则没问题，然后输入：

npm install vue-cli -g

，回车之后出现一堆东西，出现@+版本号等字样，不要管WARN等字样，则没问题，然后你可以休息一下了，基本环境ok了。

接下来在hbuilderx上配置vuecli

在hbuilderx中打开“文件”下的“新建”，然后按小编的顺序来

把这个东东C:WindowsSystem32cmd.exe也就是cmd这个文件，把它复制进你的项目文件夹，以后就不用cd了

然后在hbuilderx中"右键cmd.exe"，选择"打开文件所在目录"，这时资源管理器打开了，双击cmd，依次输入：

npm install axios -save-dev，回车，

npm i vant -S，回车，

npm i babel-plugin-import -D，回车，

npm install postcss-pxtorem lib-flexible -D，回车，

npm install --save fastclick vue-router，回车，

然后在src文件夹下新建两个文件夹，分别叫“pages”和“router”，在pages下创建一个“home”文件夹作为home页，在里面创建一个“home.vue”文件；在router下创建一个“index.js”文件，

在router下的index.js文件内写入:

import Vue from 'vue'import Router from 'vue-router'import home from '../../pages/home/home'Vue.use(Router);export default new Router({routes: [{path: '/',name: 'home',component: home}]})

把babel.config.js文件的内容修改成:

module.exports = {  presets: [    '@vue/app'  ],    "plugins": [      ["import", {        "libraryName": "vant",        "libraryDirectory": "es",        "style": true      }]    ]}

把main.js文件的内容修改成：

import Vue from 'vue'import App from './App.vue'import router from './router'import "lib-flexible/flexible"import FastClick from 'fastclick'import { Button } from 'vant'Vue.use(Button)import axios from 'axios'Vue.prototype.axios = axios;Vue.config.productionTip = falseFastClick.attach(document.body);new Vue({router,render: h => h(App),}).$mount('#app')

把postcss.config.js文件的内容修改成：

module.exports = {  plugins: {    autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 8']},'postcss-pxtorem': {  rootValue: 37.5,  propList: ['*']}  }}

在src文件夹下新建一个“vue.config.js”文件，并在文件内写入：

module.exports = {  publicPath: "./",   outputDir: "dist",   lintOnSave: true,  runtimeCompiler: false,   transpileDependencies: [      ], // 是否为生产环境构建生成sourceMap?  productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md  chainWebpack: () => {},  configureWebpack: () => {}, // CSS 相关选项  css: {    // 将组件内部的css提取到一个单独的css文件(只用在生产环境)    // 也可以是传递给 extract-text-webpack-plugin 的选项对象    extract: true, // 允许生成 CSS source maps?    sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }    loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.    modules: false  }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores  parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {}, // configure webpack-dev-server behavior  devServer: {    open: process.platform === "darwin",    disableHostCheck: false,    host: "0.0.0.0",    port: 8088,    https: false,    hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy    proxy: null // string | Object    // before: app => {}  }, // 第三方插件配置  pluginOptions: {    // ...  }};

然后打开刚才我所说的复制到项目根目录里的cmd，输入：

npm run serve

，回车后，把显示出来的网址复制到浏览器里，出现Vue图标后就表示搭建好了，

等到项目开发完成之后，使用：

npm run build

即可生成项目，生成成功后，运行项目文件夹中的dist文件夹下的index.html就可以显示您的项目内容了。

这篇文章小编就给大家分享到这里了，希望对您有所帮助，不要忘了三连哦