Npm I Vue Cli Init G

Posted on  by admin

To create a new project, run:. If you are on Windows using Git Bash with minTTY, the interactive prompts will not work.

You must launch the command as winpty vue.cmd create hello-world.

If you however want to still use the vue create hello-world syntax, you can alias the command by adding the following line to your ~/.bashrc file.

alias vue='winpty vue.cmd' You will need to restart your Git Bash terminal session to pull in the updated bashrc file.

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select "Manually select features" to pick the features you need.

The default setup is great for quickly prototyping a new project, while the manual setup provides more options that are likely needed for more production-oriented projects.

If you chose to manually select features, at the end of the prompts you also have the option to save your selections as a preset so that you can reuse it in the future.

We will discuss presets and plugins in the next section.

Saved presets will be stored in a JSON file named .vuerc in your user home directory.

If you wish to modify saved presets / options, you can do so by editing this file.

During the project creation process, you may also be prompted to select a preferred package manager, or use the Taobao npm registry mirror for faster dependency installation.

Your choices will also be saved in ~/.vuerc. The vue create command has a number of options and you can explore them all by running:. You can also create and manage projects using a graphical interface with the vue ui command:. The above command will open a browser window with a GUI that guides you through the project creation process.

接下来开始配置这两个目录,指定「全局模块的安装目录」、「缓存目录」:

Vue CLI >= 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli).

If you still need the legacy vue init functionality, you can install a global bridge:.

node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装完之后,node自带的包管理工具npm也就安装好了,我们win系统直接开始在cmd窗口输入node -v查看node版本号,如下图能看到版本号说明node安装成功: 如果当前node版本不够,可以输入下面命令行来把node版本更新到最新的稳定版本: 先清除npm缓存:npm cache clean -f 然后安装n模块:npm install -g n 升级node.js到最新稳定版:n stable 如果是mac 在命令前面加sudo:sudo n stable.

node安装成功之后,然后检测一下之前是否安装过脚手架vue-cli,检测方法是输入命令vue -V或者vue --version如果能看到版本号说明之前安装过脚手架,如下图所示: 可以看到之前安装的vue-cli是4.1.2版本,如果我们不喜欢此版本可以先卸载此版本然后安装上我们想要的版本,卸载命令是npm uninstall vue-cli -g(这是2点几版本卸载,如果是版本3或4卸载那就是npm uninstall @vue/cli -g).

npm的服务器是外国的,所以有时候我们安装“模块”会很慢很慢甚至导致安装失败。淘宝镜像将npm上面的模块同步到国内服务器,提高我们安装模块的时间和成功率。安装完淘宝镜像之后,cnpm和npm命令行皆可使用,二者并不冲突。 桌面新建一个空demo文件夹,进入空demo文件夹后,cmd进入窗口或者同时点击shift和鼠标右键,选择窗口进入,窗口里输入以下命令: npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v可以查看cnpm版本.

继续在窗口里输入以下命令: 1.npm install webpack -g 2.npm install -g vue-cli 也可以安装指定版本的脚手架,命令行执行如下: 如果是安装3以下版本的脚手架,命令npm install -g [email protected]版本号 如果是安装3以上版本的脚手架,命令npm install -g @vue/[email protected]版本号.

窗口执行命令vue init webpack demo(demo是你的项目名/文件名),执行之后会自动初始化创建一个文件夹demo,如果说我们桌面本身就有一个demo文件夹,如果我们是在桌面打开的终端而非在demo文件夹下打开的终端,此时输入创建项目命令vue init webpack demo之后就会问Target directory exists.

目标文件已存在是否将脚手架项目放在已存在的文件夹下面,我们选yes 说明: Project name:项目名称 Project description:项目描述 Author:作者 Vue build:打包方式(standalone和runtime),按回车选择默认的就好 Install vue-router?:是否安装路由?肯定是需要用到的,按 y 回车 Use ESLint to lint your code?:是否启用eslint代码检测规则?目前不需要,按 n 回车 Setup unit tests with Karma + Mocha?:是否进行单元测试?目前不需要,按 n 回车 Setup e2e tests with Nightwatch?:是否进行端对端测试?目前不需要,按 n 回车.

配置完之后,输入命令cd demo进入我们的项目文件夹,输入命令code.

就能将项目在vscode编辑器里打开,最后输入命令npm run dev启动项目,最后在浏览器地址栏输入localhost:8080就可以访问项目了。.

1)build.js > 生产环境构建脚本;.

2)check-versions.js > 检查npm,node.js版本;.

3)utils.js > 构建相关工具方法;. 4)vue-loader.conf.js > 配置了css加载器以及编译css之后自动添加前缀;.

5)webpack.base.conf.js > webpack基本配置;. 6)webpack.dev.conf.js > webpack开发环境配置;.

7)webpack.prod.conf.js > webpack生产环境配置;2、config:项目配置.

1)dev.env.js > 开发环境变量;. 2)index.js > 项目配置文件;.

3)prod.env.js > 生产环境变量;3、node_modules:npm 加载的项目依赖模块4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: 1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建; 2)components:组件目录,我们写的组件就放在这个目录里面; 3)router:前端路由,我们需要配置的路由路径写在index.js里面; 4)App.vue:根组件; 5)main.js:入口js文件;5、static:静态资源目录,如图片、字体等。不会被webpack构建6、babelrc:babel编译参数7、editorconfig:代码格式8、gitignore:git上传需要忽略的文件配置 9、postcssrc.js:转换css的工具 10、index.html:首页入口文件,可以添加一些 meta 信息等、 11、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息 12、README.md:项目的说明文档,markdown 格式.

1.安装node,方法也是node官网下载安装。 2.命令npm install -g @vue/cli 和命令npm install webpack -g​ 3.vue create project // project是项目名称 4.第3步执行回车后就让我们选择模板: default (babel, eslint): 默认配置,只有Babel和eslint,其他的都要自己另外再配置 Manually select features: 手动配置 这里我们选择手动配置,也就是选择Manually这个.

5.选择配置: 上下键切换,空格键选中是否安装对应选项(前方有*表示已被空格键选中要安装的项),比如我们空格选中安装Babel Router和Vuex这三项,babel是转码器,将es6,es7转成浏览器能识别的es5: 6.路由的两种模式(哈希模式和history模式),意思是问我们是否路由选择history模式,可以选择yes也可以选no,我们选no,后回车.

7.然后会让我们选择配置文件放在哪里,可以选第一个也可以选第二个,我们选中package.json后,将babel,router这些配置文件就放在package.json里,后回车.

8.是否保存预处理,我们选no,后回车,它会下载对应内容 9.输入命令cd demo然后输入npm run serve启动项目 生成的目录结构如下: node_modules:这个文件夹里面是我们项目需要的一些依赖; public:静态文件夹,这个文件夹中的资源不会被webpack编译,构建生产包的时候,会被直接拷贝一份; assets: 是页面和组件中用到的静态资源,比如公共样式文件,字体文件,图片等,该文件夹与public的区别是:该文件夹中的资源会被webpack编译; components: 文件夹中存放我们的组件; views: 文件夹中存放我们的页面; App.vue: 这个文件是我们所有vue页面的顶层文件; main.js: 是我们整个项目的入口文件; router.js: 是路由的配置文件; store.js: 是vuex的配置文件; .browserslistrc:文件用于给开发者设置浏览器版本的范围; .eslintrc.js:eslint配置文件; .gitignore:需要git忽略的文件; babel.config.js:babel的配置工具; package-lock.json:记录项目依赖中各个依赖之间的关系和版本,防止npm包中有不遵守“相同大版本号的同一个库包,其接口符合兼容要求”.

这一规范,导致项目运行报错; package.json:项目的描述文件,包括项目名、依赖的版本、作者、命令、入口文件等信息。.

创建项目 vue create. 启动项目 由npm run dev 改成 npm run serve. 移除了配置文件目录 config 和 build 文件夹,如果需要自定义配置,需要自己新建vue.config.js文件. 移除了 static 静态资源文件夹,新增 public 文件夹,静态资源转移到public目录中,通过/xx.xx可以直接访问,并且 index.html 移动到 public 中.

在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件.

官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到.

如果能看到node和npm的版本号了,说明已经安装成功 . 如果提示“无法识别 ‘vue’ ” ,有可能是 npm 版本过低,需要手动更新npm的版本号,这也是上面说的为什么要保证npm版本号高的原因,npm的版本可以手动升级更新,没记错的话应该是. 创建 cmd利用cd指令进入到保存项目的文件夹下,然后输入命令. 如图标记处输入项目名称(随便命名,但不要是中文),其它的看自己需要自行考虑yes还是no,每项的介绍自行百度 . 创建完成后文件夹内会有如下些文件 .

安装项目所需要的依赖 进入新建的项目文件夹下,就是上头有一些文件的里面,输入命令.

因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。. 退出,Ctrl + c >> y >> 回车. 出现如图画面,在浏览器中输入网址http://localhost:8080 会出现如下图 . 注意:如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用了(默认服务启动的是本地的8080端口),可以通过修改一下配置文件 config>index.js里的端口号 .

网上有的说执行cnpm run dev后,浏览器会自动默认打开一个“欢迎页面”,但是我的没有,原因应该如下 目录中config下的index.js文件中,将autoOpenBrowser的值是false,改为true就能自动打开了.

自己的项目文件都需要放到 src 文件夹下. 项目开发完成之后,可以输入 npm run build 来进行打包工作. 打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看.

项目上线时,只需要将 dist 文件夹放到服务器就行了。.

附:部分文件功能介绍(网上找的图片) .

你会看到下面的内容:

成功界面,提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080

npm run build,打包整个项目用的,打开dist文件夹下新生成的index.html文件,这个指令和我们的package.json文件有关,默认是这个指令。

nmp下新建出来的vue01的目录描述:

posted @ 2019-04-03 18:58cls超 阅读(42998) 评论(0) 编辑收藏举报