vue环境搭建(view:576)

补全组件,运行
cnpm install
cnpm run dev

安装cnpm
$ npm install -g cnpm –registry=https://registry.npm.taobao.org
$ cnpm install [name]

安装webpack
cnpm install webpack -g
cnpm install –save
–save作用为将操作写入package.json

安装git
git bash
tortoisegit

code123123

vue-cli构建vue项目
1.Node.js安装
node -v 和 npm -v显示版本
2.安装vue-cli
npm install vue-cli
3.使用vue-cli初始化项目(webpack为模板名称)
vue init webpack Vue-Project
4、进到目录
cd my-project
5、安装依赖
npm install
6、开始运行
npm run dev
7、测试项目–访问
localhost:8080
8、打包上线
npm run build(打包完成代码位于dist文件夹下)

打包部署的路径处理

假设项目部署在根目录下的app文件夹下
config/index.js

build: {
  assetsPublicPath: '/app/'
}

src/router/index.js

export default new Router({
  base:'/app/'
})

注意事项:css里引用图片都写相对路径
页面刷新后找不到页面:启用hash路由,或者配置服务器,将404重定向到index.html,
参考:https://segmentfault.com/q/1010000010173113

后记
公司win10系统安装没问题,在自己电脑的win7下各种出问题
问题一:node卸载掉,然后在命令行输入node命令竟然还在生效,意识到系统安装了多个node环境,搜索发现appcan里竟然也有nodejs卸载之,确保系统没有了node,然后重新安装
问题二:此时遇到第二个问题,项目文件夹是在D盘,公司win10下没问题,自己电脑上却老是出错,尝试在C盘的node目录下建立项目,顺利安装vue-cli

其他命令
npm update -g element-ui

本地手机测试
config/index.js
host: ‘localhost’ 修改为 host: ‘0.0.0.0’
这个配置的含义是,你既可以再本地用http://localhost/yoursite的url访问项目,也可以用http://yourip/yoursite访问项目。
比如你的计算机IP地址是192.168.1.10,项目名称是app,那么你的访问url就可以是http://localhost/app,或者http://192.168.1.10/app。
这样设置的好处是,当你想用非本机访问项目进行测试时,由ip地址构建的url可以对项目进行访问,同时本地还可以用localhost进行访问。
如果你将ip写死了,那么localhost就无法访问了。

关闭严格语法检查
build/webpack.base.conf.js
createLintingRule内的规则注释掉