前端框架Vue(1)——vue(脚手架) 推荐开发环境(转)
首先我认为你已经安装并且会使用node.js 和 npm1、安装淘宝镜像npm install -g cnpm --registry= https://registry.npm.taobao.org2、全局安装webpack1、安装了淘宝镜像npm install webpack -g2、没安装cnpm install webpack -g3、安装vue脚手架npm install vue-cli
·
首先我认为你已经安装并且会使用node.js 和 npm
1、安装淘宝镜像
npm install -g cnpm --registry= https://registry.npm.taobao.org
2、全局安装webpack
1、安装了淘宝镜像
npm install webpack -g
2、没安装
cnpm install webpack -g
3、安装vue脚手架
npm install vue-cli -g
4、创建一个文件夹,最好有自己的worksapce
5、根据模板创建项目
vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字
6、安装项目依赖
*必须这么写
npm install
7、启动项目
npm run dev
总结一下不能成功的原因:
1、node 、npm版本
2、遗漏步骤
8、使用ElementUI
如果不熟悉移步官网:http://element.eleme.io/#/zh-CN
1、cnpm i element-ui@1.2.5 -S(推荐1.2.5版本)
2、然后在 main.js 引入并注册
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
3、须安装
cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev
安装好后package.json下的内容
{ "name": "vue-router-cli", "description": "A Vue.js project", "version": "1.0.0", "author": "Allen 13402202685@163.com", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { *"element-ui": "^1.2.5",* "vue": "^2.2.1", "vue-resource": "^1.2.1", "vue-router": "^2.3.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", *"css-loader": "^0.25.0",* *"file-loader": "^0.9.0",* *"style-loader": "^0.16.1",* "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } }
4、在 webpack.config.js 中的 loaders 数组加入以下配置
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
loader: "file"
}
现在就可以使用Element了,如果你想用其他的UI框架也可以自行安装的
9、编译
npm run build
看了一篇非常棒的文章为了给自己做一个笔记,总结了一下。
文章地址任意门
更多推荐
已为社区贡献10条内容
所有评论(0)