Vue项目搭建

逃离我推掉我的手 2021-07-24 21:00 512阅读 0赞

一：安装node.js  
安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html

安装完成之后，在cmd命令行工具输入node - v ,如果能显示版本号就说明成功安装了。

二：安装vue-cli  
命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org
     
    cnpm -v  //查看安装情况
     
    cnpm install -g vue-cli   //使用 cnpm 安装 vue-cli
     
    vue -V //安装完成后查看安装情况

如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

### 三：生成项目 ###

1.打开命令行

2.进入项目的目录，示例如 D：/work输入（1. D:   回车    2. cd work   回车）

vue init webpack Vue-ProjectDemo

其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板 https://github.com/vuejs-templates  
Vue-ProjectDemo 是项目文件夹名称  
接下来按照提示进行简单的项目信息填写，这样就成功了一个vue框架的创建项目了

在vs打开项目后，进入终端安装依赖

cnpm install

然后启动项目：

npm run dev

vue完成项目后，打包成静态文件

四：打包 VUE 项目  
1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的）

2.在cmd里面运行

npm run build

运行的是build里面的build.js文件)

打包完成后会自动生成dist目录，直接把生成的目录交给后台在服务器配置就ok了。

正常情况下是可以直接运行的，但是不排除中间有意外情况发生，

我踩过的坑和解决方法：

1.启动项目失败-端口被占用  
解决方法：打开config/index.js修改端口

dev: {
     
    env: require('./dev.env'),
     
    port: 8080,
     
    autoOpenBrowser: true,
     
    assetsSubDirectory: 'static',
     
    assetsPublicPath: '/',
     
    proxyTable: {},

2.Node.js Cannot find module 'xxxx'问题解决方法：
    设置环境变量:
    export NODE_PATH=/usr/local/lib/node_modules/
     
    echo $NODE_PATH
     
    或者把node_module整个文件夹删掉,然后

npm clean cache

看下package.json里有没有express的依赖项,有的话直接

npm install

没有的话

npm install express --save