Vue基础

Visual Studio Code 快速格式化 Alt+Shirt+F

1.搭建项目架构:

项目采用Webpack+Vue-router的架构方式,开始安装(全部在windows系统上操作,我也没有mac电脑)。 1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装命令:

如果是已有项目
安装node.js
https://nodejs.org/zh-cn/ # 以mac 为例
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install 安装依赖包
npm run dev 启动项目    

2.在命令行中初始化项目,我们采用的是webpack模板,输入初始化命令:

  npm install --global vue-cli # 全局安装Vue环境

vue init webpack AwesomePos  #新建vue项目 AwesomePos为项目名称

不要使用ESLint语法检查

3.在命令行中,进入项目目录,使用npm install 安装ackage.json里项目的依赖包。如果你网速较慢的话,可以使用淘宝镜像的cnpm来进行安装。

4.查看是否安装正确。在命令行中输入 npm run dev ,如果能在浏览器中正常打开页面,说明安装正确。

到这里为止,我们的项目架构就建立好了,我们需要对Vue-cli给我们生成的文件进行一些必要的修改。

打包注意事项:

1、把绝对路径改为相对路径

我们打开config/index.js 会看到一个build属性,这里就我们打包的基本配置了。你在这里可以修改打包的目录,打包的文件名。最重要的是一定要把绝对目录改为相对目录。

assetsPublicPath:'./'

这样才能保证我们打包出去的项目可以正常预览。

2、在命令行中用npm run build 进行打包。

npm n run build

3.Vue 开放所有IP 0.0.0.0访问  config/index.js

原文地址:https://www.cnblogs.com/zhaoyingjie/p/10620977.html